/* Les Comptoirs d'Annam — feuille de style unique du site.
   Mise en page : catalogue éditorial clair (base « Nouveau site »), en-tête centré sur le logo,
   grilles sur ordinateur, liens du menu toujours visibles (ligne glissante sur téléphone).
   Toutes les couleurs et toutes les tailles de texte sont réglées ici, et nulle part ailleurs. */

/* ---------- Polices (hébergées sur le site, sans appel à un service extérieur) ---------- */
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/jost-300.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jost-400.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jost-500.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-400-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-500-italic.woff2) format('woff2')}

/* ---------- Réglages : couleurs, polices, 3 tailles de texte ---------- */
:root{
  --fond:#EEEAE6;          /* fond de page */
  --fond-2:#E4DDD3;        /* fond du savoir-faire, aussi en-tête, bandeau pro et pied de page */
  --tuile:#E3DDD5;         /* fond derrière les photos d'objets */
  --encre:#1F1B17;         /* texte principal */
  --texte-2:#3B342E;       /* texte courant secondaire */
  --discret:#655C53;       /* légendes, mentions */
  --filet:#D3CBC0;         /* lignes fines */
  --accent:#7A2C22;        /* bordeaux : liens principaux */
  --sans:'Jost','Futura','Helvetica Neue',Arial,sans-serif;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --fs-titre:clamp(2.2rem,4.4vw,4rem);        /* titre */
  --fs-sous-titre:clamp(1.55rem,2.6vw,2.4rem); /* sous-titre */
  --fs-corps:1.0625rem;                        /* corps */
  --fs-petit:.875rem;                          /* légendes */
  --fs-label:.75rem;                           /* petites capitales */
  --g:clamp(16px,3.4vw,48px);                  /* marge latérale */
  --sec:clamp(72px,10vw,140px);                /* espace entre sections */
  --hdr-h:190.3px;                               /* hauteur de l'en-tête en haut de page */
  --hdr-s:118px;                                /* hauteur de l'en-tête réduit */
  color-scheme:light;
}
@media (max-width:1319px){:root{--hdr-h:199.5px;--hdr-s:157px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-s) + 16px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:400 var(--fs-corps)/1.62 var(--sans);padding-top:calc(var(--hdr-h) + env(safe-area-inset-top,0px))}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:var(--fs-titre);line-height:1.06}
h2{font-size:var(--fs-sous-titre);line-height:1.15}
h3{font-size:var(--fs-corps);font-weight:500;letter-spacing:0}
figure{margin:0}
figcaption{color:var(--discret);font-size:var(--fs-petit);margin-top:10px}
figcaption b{font-weight:400;color:var(--encre)}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
.wrap{max-width:1344px;margin-inline:auto;padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* petites capitales, liens soulignés et boutons */
.label{font-size:var(--fs-label);letter-spacing:.22em;text-transform:uppercase;color:var(--discret);margin:0 0 16px}
.lien{display:inline-block;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:6px}
.lien:hover{color:var(--accent)}
.lien.accent{color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;font:inherit;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--encre);background:transparent;border:1px solid var(--encre);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--encre);color:var(--fond)}
.btn.plein{background:var(--encre);color:var(--fond)}
.btn.plein:hover{background:var(--accent);border-color:var(--accent)}

/* ---------- En-tête ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:20;background:var(--fond-2);border-bottom:1px solid var(--filet);padding-top:env(safe-area-inset-top,0px)}
.hdr-in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:32px;padding-block:22px 18px;transition:padding .25s}
.brand{display:flex;flex-direction:column;align-items:center;gap:10px}
.brand .piece-logo{width:104px;height:auto;transition:width .25s}
.brand .mot{width:270px;height:auto;transition:width .25s}
.hdr.is-small .hdr-in{padding-block:10px}
.hdr.is-small .brand{gap:6px}
.hdr.is-small .piece-logo{width:56px}
.hdr.is-small .mot{width:270px}
/* Liens du menu toujours visibles : de part et d'autre du logo sur ordinateur,
   en une ligne sous le logo sur tablette et téléphone (on la fait glisser si elle dépasse) */
.nav{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase}
.nav-d{justify-content:flex-end}
.nav a,.nav-ligne a{padding-block:6px;border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current],.nav-ligne a:hover,.nav-ligne a[aria-current]{border-bottom-color:currentColor}
.nav-ligne{display:none}
@media (max-width:1319px){
  .hdr-in{grid-template-columns:minmax(0,1fr);justify-items:center;padding-block:10px 8px}
  .hdr.is-small .hdr-in{padding-block:10px 8px}
  .nav-g,.nav-d{display:none}
  .brand{gap:6px}
  .brand .piece-logo{width:90px}
  .hdr.is-small .piece-logo{width:48px}
  .brand .mot,.hdr.is-small .mot{width:270px}
  .nav-ligne{display:block;border-top:1px solid var(--filet)}
  .nav-ligne ul{position:relative;list-style:none;margin:0;display:flex;gap:24px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;padding-block:6px;padding-left:max(var(--g),env(safe-area-inset-left,0px));padding-right:max(var(--g),env(safe-area-inset-right,0px));
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent)}
  .nav-ligne ul::-webkit-scrollbar{display:none}
  .nav-ligne li:first-child{margin-left:auto}
  .nav-ligne li:last-child{margin-right:auto}
  .nav-ligne a{display:inline-block;padding-block:8px;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase}
}

/* ---------- Sections communes ---------- */
.sec{padding-block:var(--sec)}
.sec-tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:16px 40px;border-top:1px solid var(--filet);padding-top:28px;margin-bottom:clamp(32px,4vw,48px)}
.sec-tete .cote{color:var(--texte-2);max-width:46ch}
.deux{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px clamp(32px,5vw,64px);align-items:end}
@media (max-width:900px){.deux{grid-template-columns:1fr;align-items:start}}

/* ouverture */
.ouverture{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);column-gap:64px;row-gap:28px;align-items:end;padding-block:clamp(48px,7vw,88px) clamp(32px,4vw,56px)}
.ouverture .cote{display:flex;flex-direction:column;gap:24px}
.ouverture .cote p{color:var(--texte-2)}
.photo-ouverture img{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:50% 78%}
.photo-ouverture figcaption{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--texte-2)}
@media (max-width:900px){.ouverture{grid-template-columns:1fr}.photo-ouverture img{aspect-ratio:4/3}}

/* phrase d'accroche */
.accroche{text-align:center;padding-block:var(--sec)}
.accroche p.grand{max-width:940px;margin-inline:auto;font-weight:300;font-size:var(--fs-sous-titre);line-height:1.32}
.accroche .lien{margin-top:36px}

/* collection : cartes */
.grille-pieces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:24px;row-gap:56px}
.carte{display:flex;flex-direction:column;gap:12px;min-width:0}
.carte .ph{display:block;aspect-ratio:1/1;background:var(--tuile);overflow:hidden}
.carte .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.carte .ph:hover img{transform:scale(1.02)}
.carte-l1{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.carte h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.sig{font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--texte-2);white-space:nowrap}
.carte .spec{margin-top:-8px;font-size:var(--fs-petit);color:var(--discret)}
.vars{display:flex;flex-wrap:wrap;gap:4px 14px}
.vars .v{font:inherit;font-size:.8rem;color:var(--discret);background:none;border:0;border-bottom:1px solid transparent;padding:4px 0 2px;cursor:pointer}
.vars .v:hover{color:var(--encre)}
.vars .v.on{color:var(--encre);border-bottom-color:currentColor}
@media (max-width:1100px){.grille-pieces{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.grille-pieces{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:36px}.carte-l1{flex-direction:column;gap:2px}.sig{white-space:normal}}

/* savoir-faire : photo et texte côte à côte */
.bande{background:var(--fond-2)}
.sf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:1440px;margin-inline:auto}
.sf .visuel img{width:100%;height:100%;min-height:420px;object-fit:cover}
.sf .texte{padding-block:clamp(56px,7vw,112px);padding-left:clamp(28px,5vw,88px);padding-right:max(var(--g),env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px}
.sf .texte p{color:var(--texte-2);max-width:58ch}
.sf .actions{margin-top:12px}
@media (max-width:900px){.sf{grid-template-columns:1fr}.sf .visuel img{min-height:0;aspect-ratio:4/3}.sf .texte{padding-left:max(var(--g),env(safe-area-inset-left,0px))}}

/* coloris et finitions */
.fin-intro p{color:var(--texte-2);max-width:56ch}
.fin-intro p+p{margin-top:10px}
.coloris{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,40px) clamp(12px,2vw,28px)}
.coloris li{min-width:0}
.coloris .ph{aspect-ratio:1/1;background:var(--tuile);overflow:hidden}
.coloris img{width:100%;height:100%;object-fit:cover}
.coloris span{display:block;margin-top:10px;font-size:.95rem}
.note{margin-top:clamp(24px,3vw,36px);font-size:var(--fs-petit);color:var(--discret);max-width:70ch}
@media (max-width:1100px){.coloris{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.coloris{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}}

/* références */
.trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);align-items:start}
.trois .ph{aspect-ratio:4/5;background:var(--tuile);overflow:hidden}
.trois .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 70%}
.bandeau-noms{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:22px 0;border-block:1px solid var(--filet);display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-size:var(--fs-label);letter-spacing:.2em;text-transform:uppercase;color:var(--texte-2)}
.bandeau-noms li+li::before{content:"·";margin-right:28px;color:var(--discret)}
.sous-bloc{margin-top:clamp(64px,8vw,112px)}
.sous-bloc>.deux{margin-bottom:clamp(28px,4vw,44px)}
.sous-bloc .deux p{color:var(--texte-2);max-width:60ch}
.photos-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,24px);align-items:start}
.photos-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,24px);align-items:end;margin-top:clamp(24px,3vw,40px)}
.photos-2 img,.photos-4 img{width:100%;background:var(--tuile)}
.groupes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(24px,4vw,56px)}
.groupes .label{margin-bottom:12px}
.noms{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.noms li{padding:12px 0;border-bottom:1px solid var(--filet);font-size:1.15rem;font-weight:300}
@media (max-width:900px){.trois{grid-template-columns:1fr}.trois .ph{aspect-ratio:4/3}.groupes{grid-template-columns:1fr}.photos-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.photos-2{grid-template-columns:1fr}.bandeau-noms li+li::before{display:none}}

/* histoire */
.histoire{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.histoire .texte p{color:var(--texte-2);max-width:60ch}
.histoire .texte p+p{margin-top:16px}
.histoire h2{margin-bottom:28px}
.histoire .texte strong{font-weight:500;color:var(--encre)}
.directions{margin:16px 0 0;padding-left:1.1em;display:grid;gap:12px;color:var(--texte-2);max-width:60ch}
.directions li::marker{color:var(--discret)}
.authentification{margin-top:32px;padding:24px 0 0;border-top:1px solid var(--encre);font-size:1.15rem;line-height:1.5;color:var(--encre)!important}
.histoire .ph{aspect-ratio:1/1;background:var(--tuile);overflow:hidden}
.histoire .ph img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.histoire{grid-template-columns:1fr}.histoire figure{max-width:520px}}

/* professionnels */
.pro{display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:28px clamp(32px,5vw,80px);align-items:end;padding-block:clamp(56px,7vw,96px)}
.pro p{color:var(--texte-2);max-width:58ch}
.pro p+p{margin-top:12px}
.pro h2{margin-bottom:20px}
@media (max-width:900px){.pro{grid-template-columns:1fr;align-items:start}}

/* contact et formulaire */
.contact-grille{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.cform{display:grid;gap:20px;min-width:0}
.cform .ligne2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cform label{display:grid;gap:6px;color:var(--discret);font-size:var(--fs-petit);min-width:0}
.cform input,.cform select,.cform textarea{font:400 1rem/1.4 var(--sans);color:var(--encre);background:transparent;border:0;border-bottom:1px solid var(--filet);border-radius:0;padding:10px 0;width:100%;-webkit-appearance:none;appearance:none}
.cform select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 10px) 55%,calc(100% - 5px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:24px}
.cform textarea{resize:vertical;min-height:130px}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:none;border-bottom-color:var(--encre)}
.cform .opt{font-size:.8rem}
.cform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cform .rgpd{font-size:.82rem;color:var(--discret);max-width:62ch}
.cform .rgpd a{border-bottom:1px solid currentColor}
.cform .btn{justify-self:start}
.cform .statut{min-height:1.4em}
.cform.flash{animation:flash 1.6s ease}
@keyframes flash{0%{box-shadow:0 0 0 0 transparent}20%{box-shadow:0 0 0 12px var(--filet)}100%{box-shadow:0 0 0 0 transparent}}
.coordonnees{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.coordonnees li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--filet);min-width:0}
.coordonnees li>span:first-child{color:var(--discret)}
.coordonnees li>*:last-child{text-align:right}
.coordonnees a{border-bottom:1px solid currentColor}
@media (max-width:900px){.contact-grille{grid-template-columns:1fr}}
@media (max-width:560px){.cform .ligne2{grid-template-columns:1fr}}

/* ---------- Pied de page ---------- */
.pied{background:var(--fond-2);border-top:1px solid var(--filet);padding-block:clamp(56px,7vw,88px) 28px}
.pied-logo{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:clamp(36px,5vw,56px)}
.pied-logo .piece-logo{width:90px;height:auto}
.pied-logo .mot{width:270px;height:auto}
.pied-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;text-align:center}
.pied-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pied-cols a:hover{text-decoration:underline;text-underline-offset:3px}
.pied-bas{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(40px,5vw,72px);padding-top:20px;border-top:1px solid var(--filet);font-size:.8rem;color:var(--discret)}
.pied-bas a{border-bottom:1px solid currentColor}
@media (max-width:760px){.pied-cols{grid-template-columns:1fr;gap:32px}.pied-bas{justify-content:center;text-align:center}}

/* ---------- Pages à part ---------- */
.page-tete{padding-block:clamp(40px,6vw,80px) clamp(28px,4vw,48px)}
.page-tete .cote{color:var(--texte-2);max-width:56ch;margin-top:20px}
.fil{font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--discret);padding-top:clamp(24px,3vw,36px);display:flex;flex-wrap:wrap;gap:6px 10px}
.fil a:hover{color:var(--encre)}
.fil span[aria-hidden]{color:var(--filet)}

/* fiche produit */
.fiche{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;padding-block:clamp(28px,3vw,40px) var(--sec)}
.fiche .principale{aspect-ratio:1/1;background:var(--tuile);overflow:hidden}
.fiche .principale img{width:100%;height:100%;object-fit:cover}
.vignettes{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.vig{width:88px;padding:0;background:var(--tuile);border:1px solid transparent;cursor:pointer}
.vig img{width:100%;aspect-ratio:1/1;object-fit:cover}
.vig[aria-pressed="true"]{border-color:var(--encre)}
.fiche-info h1{font-size:var(--fs-sous-titre)}
.fiche-info .sig{display:block;margin-top:6px;white-space:normal}
.fiche-info .desc{margin-top:22px;color:var(--texte-2);max-width:54ch}
.coloris-actuel{margin-top:22px;font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--discret)}
.coloris-actuel strong{font-weight:400;color:var(--encre)}
.specs{display:grid;grid-template-columns:auto minmax(0,1fr);margin:24px 0 28px;border-top:1px solid var(--filet)}
.specs dt,.specs dd{margin:0;padding:12px 0;border-bottom:1px solid var(--filet)}
.specs dt{color:var(--discret);padding-right:24px}
.fiche-info .note{margin-top:20px}
.galerie-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);align-items:start}
.galerie-mini img{width:100%;background:var(--tuile)}
@media (max-width:900px){.fiche{grid-template-columns:1fr}.galerie-mini{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.grille-pieces.quatre{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* galerie */
.mosaique{columns:3 300px;column-gap:clamp(16px,2vw,28px)}
.mosaique figure{break-inside:avoid;margin-bottom:clamp(20px,2.4vw,32px)}
.mosaique img{width:100%;background:var(--tuile)}
@media (max-width:760px){.mosaique{columns:2;column-gap:12px}.mosaique figure{margin-bottom:16px}.mosaique figcaption{font-size:.78rem}}


/* mentions légales */
.legal{max-width:760px;padding-bottom:var(--sec)}
.legal h1{margin-bottom:10px}
.legal .maj{color:var(--discret);font-size:var(--fs-petit);margin-bottom:24px}
.legal section{padding-block:24px;border-top:1px solid var(--filet)}
.legal h2{margin-bottom:12px}
.legal p,.legal li{color:var(--texte-2)}
.legal p+p{margin-top:12px}
.legal ul{padding-left:1.2em}
.legal a{border-bottom:1px solid currentColor}
.legal table{width:100%;border-collapse:collapse;font-size:var(--fs-petit)}
.legal th,.legal td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--filet);vertical-align:top}
.legal .tableau{overflow-x:auto}

/* compléments */
.label{font-weight:400}
.h-sous{font-size:var(--fs-sous-titre);font-weight:300;letter-spacing:-.01em;line-height:1.15}
.pied-logo a{display:flex;flex-direction:column;align-items:center;gap:12px}
.pied .petit{font-size:var(--fs-petit);color:var(--discret);margin-top:6px}
.suite{padding-bottom:var(--sec)}
.sec[id]{scroll-margin-top:calc(28px - var(--sec))}
.mosaique{margin-bottom:var(--sec)}
@media (max-width:760px){.vignettes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.vig{width:auto}}
/* « Mobilier national © » : le © est plus petit */
.copy{font-size:.7em;vertical-align:.3em;margin-left:.2em;line-height:0}

/* ---------- Pages éditoriales : Christian Duc, savoir-faire, coloris, professionnels, catégories ---------- */
.article{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start;padding-bottom:var(--sec)}
.article .texte{display:grid;gap:16px;align-content:start}
.article .texte p,.article .texte li{color:var(--texte-2);max-width:62ch}
.article .texte h2{margin-top:clamp(28px,4vw,48px)}
.article .texte h2:first-child{margin-top:0}
.article .texte ul{margin:0;padding-left:1.1em;display:grid;gap:10px}
.article .texte li::marker{color:var(--discret)}
.article .texte .actions{margin-top:12px}
.article aside{display:grid;gap:clamp(20px,2.4vw,32px)}
.article aside img{width:100%;background:var(--tuile)}
.article aside .actions{flex-direction:column;align-items:stretch}
@media (max-width:900px){.article{grid-template-columns:1fr}}
.etapes{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet);counter-reset:etape}
.etapes li{counter-increment:etape;display:grid;grid-template-columns:3rem minmax(0,1fr);column-gap:16px;row-gap:4px;padding:18px 0;border-bottom:1px solid var(--filet);max-width:none!important}
.etapes li::before{content:counter(etape,decimal-leading-zero);grid-row:span 2;font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.2;color:var(--discret)}
.etapes b{font-weight:500;color:var(--encre)}
.etapes span{color:var(--texte-2)}
.categories{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:clamp(40px,5vw,64px)}
.coloris .pieces{display:block;margin-top:4px;font-size:var(--fs-petit);color:var(--discret)}
.coloris .pieces a{border-bottom:1px solid currentColor}
.cat-photo{margin-top:clamp(48px,6vw,80px);max-width:880px}
.cat-photo img{width:100%;background:var(--tuile)}
.points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px clamp(32px,5vw,64px);padding-bottom:clamp(56px,7vw,96px)}
.points h3{margin-bottom:8px}
.points p{color:var(--texte-2);max-width:56ch}
.points a{border-bottom:1px solid currentColor;white-space:nowrap}
.points a:hover{color:var(--accent)}
@media (max-width:760px){.points{grid-template-columns:1fr}}