/* ==========================================================================
   3D Indre-et-Loire · « Revue d'atelier »
   --------------------------------------------------------------------------
   COULEURS (6, dont un seul accent)
     --papier  #F3F1EC  le papier de la revue
     --blanc   #FFFFFF  champs du formulaire, aplats clairs
     --encre   #16181B  texte, filets
     --gris    #54585E  encre secondaire (légendes, mentions)
     --accent  #BF3B0A  l'unique couleur vive : l'orange d'un filament
     --pale    #F1DDD1  le même accent, très dilué (fonds de figures, sélection)
   POLICES
     Titrage  : Fraunces variable (axes opsz et wght), romain et italique
     Courant  : Figtree variable
     Utilitaire (folios, légendes, cotes) : Figtree en petites capitales espacées
   MISE EN PAGE
     Une revue technique : grille de 12 colonnes visible, folios, légendes en marge,
     et un seul motif dessiné, la couche déposée (traits empilés, pièce en coupe).
   ========================================================================== */

@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-latin-opsz-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url("/assets/fonts/fraunces-latin-full-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Figtree";src:url("/assets/fonts/figtree-latin-wght-normal.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --papier:#F3F1EC; --blanc:#FFFFFF; --encre:#16181B; --gris:#54585E; --accent:#BF3B0A; --pale:#F1DDD1;
  --m-accent:#BF3B0A; --m-fil-1:#16181B;
  --filet:rgba(22,24,27,.22); --filet-fin:rgba(22,24,27,.075);
  --titre:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --texte:"Figtree","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --bord:22px; --gout:24px; --large:1240px;
  --cote:max(var(--bord),calc((100% - var(--large))/2));
}
@media (min-width:1100px){:root{--bord:40px}}

*,*::before,*::after{box-sizing:border-box}
html{font-variation-settings:"WONK" 0;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--papier);color:var(--encre);font:400 1.0625rem/1.62 var(--texte);font-feature-settings:"kern","liga";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,dl,dd,figure,table{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
::selection{background:var(--pale);color:var(--encre)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.evitement{position:absolute;left:12px;top:-60px;background:var(--encre);color:var(--blanc);padding:12px 16px;z-index:50;text-decoration:none}
.evitement:focus{top:12px}

/* --- utilitaire : petites capitales espacées ----------------------------- */
.cap,.folio,.legende b,.tab th,.fiche dt,.bulletin label,.tete nav a,.rail,.cote{font:600 .72rem/1.3 var(--texte);letter-spacing:.14em;text-transform:uppercase}

/* --- liens : le soulignement est un trait de matière qui s'épaissit ------ */
.lien,.prose a:not(.btn),.pied a{color:inherit;text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1px no-repeat;padding-bottom:1px;transition:background-size .3s cubic-bezier(.2,.7,.2,1),color .2s}
.lien:hover,.prose a:not(.btn):hover,.pied a:hover{background-size:100% 100%;color:var(--blanc)}

/* --- boutons --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:48px;padding:.55em 1.25em;border:1.5px solid var(--encre);background:var(--encre);color:var(--blanc);font:600 .98rem/1.1 var(--texte);letter-spacing:.01em;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s}
.btn::before{content:"";position:absolute;inset:0;background:var(--accent);transform:translateY(101%);transition:transform .38s cubic-bezier(.2,.7,.2,1);z-index:-1}
.btn:hover{border-color:var(--accent)}
.btn:hover::before{transform:none}
.btn--clair{background:transparent;color:var(--encre)}
.btn--clair:hover{color:var(--blanc)}
.btn .fl{display:inline-block;transition:transform .3s}
.btn:hover .fl{transform:translateX(4px)}

/* ==========================================================================
   En-tête
   ========================================================================== */
.tete{position:sticky;top:0;z-index:30;background:var(--papier);border-bottom:1px solid var(--encre)}
.tete-in{width:min(var(--large),100% - 2*var(--bord));margin-inline:auto;display:flex;align-items:center;gap:20px;min-height:64px}
.logo{display:inline-flex;align-items:baseline;gap:.34em;text-decoration:none;margin-right:auto;min-height:44px;padding-top:6px;white-space:nowrap}
.logo-3d{font:900 1.72rem/1 var(--titre);font-variation-settings:"opsz" 144,"WONK" 0;letter-spacing:-.04em}
.logo-o{width:20px;height:14px;align-self:center;color:var(--accent);overflow:visible}
.logo-nom{font:italic 420 1.18rem/1 var(--titre);font-variation-settings:"opsz" 30,"WONK" 0;letter-spacing:-.005em;transition:font-variation-settings .35s,letter-spacing .35s}
.logo:hover .logo-nom{font-variation-settings:"opsz" 30,"WONK" 0,"wght" 700}
.nav-large{display:none}
.tete nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 2px;position:relative}
.tete nav a::after{content:"";position:absolute;left:0;right:0;bottom:9px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.tete nav a:hover::after{transform:scaleX(1)}
.tete .tel{display:none;font:600 1rem/1 var(--texte);text-decoration:none;white-space:nowrap;min-height:44px;align-items:center;font-variant-numeric:tabular-nums}
.tete .tel:hover{color:var(--accent)}
.tete .btn{display:none;min-height:44px}
.menu{position:static}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 12px;font:600 .72rem/1 var(--texte);letter-spacing:.14em;text-transform:uppercase}
.menu summary::-webkit-details-marker{display:none}
.menu summary i{width:22px;height:12px;border-block:2px solid var(--encre);transition:height .25s,transform .25s}
.menu[open] summary i{height:2px;border-bottom:0;transform:none}
.menu nav{position:absolute;left:0;right:0;top:100%;background:var(--papier);border-bottom:1px solid var(--encre);padding:8px var(--bord) 20px;display:grid}
.menu nav a{min-height:52px;border-bottom:1px solid var(--filet);font:500 1.5rem/1 var(--titre);letter-spacing:0;text-transform:none}
.menu nav a::after{display:none}
@media (min-width:1100px){
  .nav-large{display:flex;gap:26px;margin-right:14px}
  .tete .tel,.tete .btn{display:inline-flex}
  .menu{display:none}
}

/* barre fixe du téléphone */
.barre{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--encre);background:var(--papier)}
.barre a{min-height:54px;display:flex;align-items:center;justify-content:center;font:600 .98rem/1 var(--texte);text-decoration:none}
.barre a+a{background:var(--encre);color:var(--blanc)}
body{padding-bottom:54px}
@media (min-width:1100px){.barre{display:none}body{padding-bottom:0}}

/* ==========================================================================
   La page et sa grille visible
   ========================================================================== */
.page{position:relative;overflow-x:clip}
.page::before{content:"";position:absolute;top:0;bottom:0;left:var(--cote);right:var(--cote);pointer-events:none;
  background:linear-gradient(to right,var(--filet-fin) 1px,transparent 1px) 0 0/25% 100%;border-right:1px solid var(--filet-fin)}
@media (min-width:900px){.page::before{background-size:calc((100% + var(--gout))/12) 100%;background-position:calc(var(--gout)/-2) 0;border-right:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.col{width:min(var(--large),100% - 2*var(--bord));margin-inline:auto;position:relative;z-index:1}
.g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gout);row-gap:28px}
.g>*{grid-column:1/-1;min-width:0}
@media (min-width:900px){.g{grid-template-columns:repeat(12,minmax(0,1fr));row-gap:40px}.g>[style*="--c"]{grid-column:var(--c)}.g>[style*="--r"]{grid-row:var(--r)}}

/* la strate : quatre couches posées en tête de page, la dernière en cours de dépôt */
.strate{display:grid;gap:5px;padding:22px 0 14px}
.strate i{display:block;height:2px;border-radius:2px;background:var(--encre);transform-origin:0 50%}
.strate i:first-child{width:38%;background:var(--accent)}
@media (min-width:1100px){.strate{padding:40px 0 18px;gap:6px}.strate i{height:3px}}
.rail{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:space-between;border-block:1px solid var(--encre);padding:9px 0;color:var(--encre)}
.rail span:last-child{color:var(--gris)}
.rail a{text-decoration:none}
.rail a:hover{color:var(--accent)}

/* ==========================================================================
   Typographie éditoriale
   ========================================================================== */
h1,h2,h3{font-family:var(--titre);font-weight:340;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(2.55rem,7.4vw,5.5rem);line-height:.97;font-variation-settings:"opsz" 144,"WONK" 0;letter-spacing:-.022em}
h1 em,h2 em{font-style:italic;font-weight:640;color:var(--accent)}
h2{font-size:clamp(1.95rem,4.3vw,3.35rem);line-height:1.04;font-variation-settings:"opsz" 110,"WONK" 0}
h3{font-size:1.4rem;line-height:1.15;font-weight:560;font-variation-settings:"opsz" 36,"WONK" 0;letter-spacing:-.008em}
.chapo{font:400 clamp(1.16rem,1.7vw,1.38rem)/1.5 var(--titre);font-variation-settings:"opsz" 24,"WONK" 0;color:var(--encre)}
.prose p+p{margin-top:1.05em}
.prose p{max-width:66ch}
.prose strong{font-weight:650}
.lettrine::first-letter{font-family:var(--titre);font-weight:800;font-variation-settings:"opsz" 144,"WONK" 0;float:left;font-size:4.9em;line-height:.8;padding:.07em .09em 0 0;color:var(--accent)}
.exergue{font:italic 380 clamp(1.5rem,3vw,2.3rem)/1.18 var(--titre);font-variation-settings:"opsz" 80,"WONK" 0;letter-spacing:-.012em;border-top:3px solid var(--accent);padding-top:.7em;text-wrap:balance}
.exergue b{font-weight:700;font-style:normal}

.sec{padding-block:clamp(54px,8vw,112px) 0}
.folio{display:flex;align-items:baseline;gap:14px;border-top:1px solid var(--encre);padding-top:10px;margin-bottom:clamp(26px,4vw,52px)}
.folio i{font:italic 600 1.05rem/1 var(--titre);letter-spacing:0;text-transform:none;color:var(--accent);font-variant-numeric:lining-nums}
.folio span:last-child{margin-left:auto;color:var(--gris)}

/* figures : photos cadrées serré, légende en marge */
.fig{position:relative}
.fig-im{overflow:hidden;background:var(--pale)}
.fig-im img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.fig:hover .fig-im img{transform:scale(1.035)}
.legende{font:400 .86rem/1.45 var(--texte);color:var(--gris);margin-top:12px;padding-top:9px;border-top:1px solid var(--filet);max-width:38ch}
.legende b{display:block;color:var(--encre);margin-bottom:4px}
@media (prefers-reduced-motion:reduce){.fig-im img,.btn::before{transition:none}}

/* ==========================================================================
   Ouverture
   ========================================================================== */
.ouv{padding-bottom:8px}
.ouv .g{row-gap:26px;padding-top:clamp(26px,4vw,48px)}
.ouv h1{max-width:13ch}
.ouv-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.ouv .fig-im{aspect-ratio:4/3.4}
.ouv .fig-im img{object-position:50% 38%}
@media (min-width:900px){.ouv .fig-im{aspect-ratio:auto;height:clamp(440px,46vw,620px)}.ouv .fig{margin-top:-18px}.ouv h1{max-width:none}}

.fiche{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--encre);border-bottom:1px solid var(--encre);margin-top:clamp(34px,5vw,60px)}
.fiche div{padding:16px 14px 18px 0;border-bottom:1px solid var(--filet)}
.fiche div:nth-child(even){padding-left:14px;border-left:1px solid var(--filet)}
.fiche div:nth-last-child(-n+2){border-bottom:0}
.fiche dt{color:var(--gris)}
.fiche dd{font:420 clamp(1.7rem,3.6vw,2.7rem)/1 var(--titre);font-variation-settings:"opsz" 144,"WONK" 0;letter-spacing:-.03em;margin-top:8px;white-space:nowrap}
.fiche dd small{font:500 .92rem/1.3 var(--texte);letter-spacing:0;display:block;color:var(--gris);margin-top:6px;white-space:normal}
@media (min-width:900px){.fiche{grid-template-columns:repeat(4,auto)}.fiche div{border-bottom:0;padding:18px 20px 20px 0}.fiche div+div{padding-left:20px;border-left:1px solid var(--filet)}}

/* ==========================================================================
   Tableaux (trajet d'une commande, matières, délais)
   ========================================================================== */
.tab{width:100%;border-collapse:collapse;font-size:1rem}
.tab caption{text-align:left;font:italic 500 1.3rem/1.2 var(--titre);padding-bottom:12px}
.tab th{text-align:left;color:var(--gris);padding:10px 16px 10px 0;border-bottom:1px solid var(--encre);vertical-align:bottom}
.tab td{padding:16px 16px 16px 0;border-bottom:1px solid var(--filet);vertical-align:top}
.tab td:first-child{font:560 1.22rem/1.2 var(--titre);font-variation-settings:"opsz" 30,"WONK" 0;white-space:nowrap;padding-right:22px;transition:font-variation-settings .3s,color .3s}
.tab tr:hover td:first-child{color:var(--accent);font-variation-settings:"opsz" 30,"WONK" 0,"wght" 760}
.tab .n{font:italic 600 1rem/1 var(--titre);color:var(--accent);margin-right:.5em}
@media (max-width:719px){
  .tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tab,.tab tbody,.tab tr,.tab td{display:block}
  .tab tr{padding:14px 0;border-bottom:1px solid var(--filet)}
  .tab td{border:0;padding:0}
  .tab td:first-child{white-space:normal;margin-bottom:4px}
  .tab td+td{margin-top:4px}
  .tab td[data-t]::before{content:attr(data-t) " · ";font:600 .68rem/1 var(--texte);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
}

/* ==========================================================================
   Sommaire des prestations
   ========================================================================== */
.sommaire{border-top:1px solid var(--encre);counter-reset:s}
.sommaire li{display:grid;grid-template-columns:1fr;gap:2px 20px;padding:15px 0 16px;border-bottom:1px solid var(--filet);position:relative}
.sommaire h3{font-size:clamp(1.3rem,2.2vw,1.72rem);font-weight:420;transition:font-variation-settings .35s,letter-spacing .35s,color .25s,transform .35s cubic-bezier(.2,.7,.2,1)}
.sommaire p{color:var(--gris);font-size:.98rem;line-height:1.45}
.sommaire li::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.sommaire li:hover::after{transform:scaleX(1)}
.sommaire li:hover h3{font-variation-settings:"opsz" 36,"WONK" 0,"wght" 720;color:var(--accent);transform:translateX(6px)}
@media (min-width:720px){.sommaire li{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:baseline}}

.decale{margin-top:0}
@media (min-width:900px){.decale{margin-top:84px}}

/* grand format : la cote dessinée */
.grand{border-block:1px solid var(--encre);padding-block:28px}
.grand-n{font:300 clamp(2.6rem,7.6vw,6rem)/.95 var(--titre);font-variation-settings:"opsz" 144,"WONK" 0;letter-spacing:-.045em;white-space:nowrap}
.grand-n i{font-style:italic;font-weight:300;color:var(--accent);padding:0 .06em}
.grand-n small{font:italic 500 .3em/1 var(--titre);letter-spacing:0;margin-left:.3em}
.cotes{width:100%;max-width:250px;height:auto;display:block;margin-inline:auto}
.cotes .a{fill:none;stroke:var(--encre);stroke-width:1.4;stroke-linejoin:round}
.cotes .h{fill:none;stroke:var(--encre);stroke-width:1;stroke-dasharray:3 4;opacity:.5}
.cotes .s{fill:none;stroke:var(--accent);stroke-width:.8;opacity:.7}
.cotes .d{fill:none;stroke:var(--gris);stroke-width:1}
.cotes text{font:600 11px var(--texte);letter-spacing:.1em;fill:var(--encre)}

/* colonnes de journal */
.colonnes{columns:1;column-gap:var(--gout)}
.colonnes>div{break-inside:avoid;padding:18px 0 20px;border-top:1px solid var(--filet)}
.colonnes h3{margin-bottom:6px}
.colonnes p{color:var(--encre);font-size:1rem}
@media (min-width:720px){.colonnes{columns:2}}
@media (min-width:1200px){.colonnes--4{columns:4}.colonnes--3{columns:3}}

/* index des villes */
.villes{border-top:1px solid var(--encre)}
.villes li{border-bottom:1px solid var(--filet)}
.villes a{display:grid;grid-template-columns:1fr auto;gap:2px 18px;align-items:baseline;padding:16px 0 17px;text-decoration:none;min-height:44px}
.villes b{font:360 clamp(1.55rem,3.6vw,2.7rem)/1.05 var(--titre);font-variation-settings:"opsz" 120,"WONK" 0;letter-spacing:-.022em;transition:font-variation-settings .4s,letter-spacing .4s,color .25s}
.villes b small{font:600 .7rem/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--gris);display:block;margin-bottom:6px}
.villes span{grid-column:1;color:var(--gris);font-size:.98rem}
.villes i{grid-row:1/3;grid-column:2;align-self:center;font:italic 400 1.6rem/1 var(--titre);color:var(--accent);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.villes a:hover b{font-variation-settings:"opsz" 120,"WONK" 0,"wght" 700;font-style:italic;color:var(--accent)}
.villes a:hover i{transform:translateX(8px)}
@media (min-width:900px){.villes a{grid-template-columns:minmax(0,6fr) minmax(0,5fr) auto}.villes span{grid-column:2;grid-row:1}.villes i{grid-column:3;grid-row:1}}

/* questions */
.qr{border-top:1px solid var(--encre)}
.qr>div{padding:22px 0 24px;border-bottom:1px solid var(--filet);display:grid;gap:8px var(--gout)}
.qr dt{font:520 1.28rem/1.22 var(--titre);font-variation-settings:"opsz" 36,"WONK" 0;letter-spacing:-.008em}
.qr dt::before{content:"Q.";font:italic 700 .8em/1 var(--titre);color:var(--accent);margin-right:.5em}
.qr dd{max-width:64ch}
@media (min-width:900px){.qr>div{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}

/* listes à puces sobres */
.liste li{padding:11px 0 11px 30px;border-bottom:1px solid var(--filet);position:relative}
.liste li::before{content:"";position:absolute;left:0;top:1.35em;width:18px;height:2px;background:var(--accent)}
.defs>div{padding:18px 0 20px;border-top:1px solid var(--filet)}
.defs dt{font:560 1.3rem/1.2 var(--titre);font-variation-settings:"opsz" 36,"WONK" 0;margin-bottom:6px}
.defs dd{max-width:62ch}

/* ==========================================================================
   Bulletin de devis
   ========================================================================== */
.bulletin{background:var(--blanc);border:1.5px dashed var(--encre);padding:clamp(20px,4vw,44px);position:relative}
.bulletin-t{font:italic 500 clamp(1.5rem,3vw,2.1rem)/1.1 var(--titre);font-variation-settings:"opsz" 80,"WONK" 0;margin-bottom:6px}
.bulletin-s{color:var(--gris);font-size:.96rem;margin-bottom:22px}
.champs{display:grid;gap:20px var(--gout)}
@media (min-width:720px){.champs{grid-template-columns:1fr 1fr}.champs .plein{grid-column:1/-1}}
.bulletin label{display:block;color:var(--gris);margin-bottom:4px}
.bulletin label i{font-style:normal;color:var(--accent)}
.bulletin input[type=text],.bulletin input[type=email],.bulletin input[type=tel],.bulletin select,.bulletin textarea{width:100%;font:500 1.06rem/1.4 var(--texte);color:var(--encre);background:transparent;border:0;border-bottom:1.5px solid var(--encre);border-radius:0;padding:10px 0;min-height:48px;transition:border-color .2s,box-shadow .2s;appearance:none}
.bulletin select{background:linear-gradient(45deg,transparent 50%,var(--encre) 50%) right 12px center/7px 7px no-repeat,linear-gradient(-45deg,transparent 50%,var(--encre) 50%) right 5px center/7px 7px no-repeat;padding-right:28px}
.bulletin textarea{min-height:132px;resize:vertical;background:repeating-linear-gradient(transparent 0 calc(1.4em * 1.06 - 1px),var(--filet) calc(1.4em * 1.06 - 1px) calc(1.4em * 1.06)) 0 10px;border-bottom-color:var(--encre)}
.bulletin input:focus,.bulletin select:focus,.bulletin textarea:focus{outline:0;border-bottom-color:var(--accent);box-shadow:0 2px 0 var(--accent)}
.bulletin input[type=file]{width:100%;font:500 .95rem var(--texte);color:var(--gris);min-height:48px;padding:8px 0}
.bulletin input[type=file]::file-selector-button{font:600 .9rem var(--texte);color:var(--encre);background:var(--papier);border:1.5px solid var(--encre);padding:9px 14px;margin-right:12px;cursor:pointer;min-height:44px}
.pot{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.bulletin-bas{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:26px}
.bulletin-bas p{font-size:.88rem;color:var(--gris);max-width:46ch;line-height:1.45}
.erreur{border:1.5px solid #9A2B1E;color:#7C2015;background:#FBEDEA;padding:12px 16px;margin-bottom:20px;font-weight:600}
.cote{color:var(--gris)}
.appel{font:420 clamp(1.7rem,3.4vw,2.5rem)/1.05 var(--titre);font-variation-settings:"opsz" 120,"WONK" 0;letter-spacing:-.02em;text-decoration:none;display:inline-block;min-height:44px;white-space:nowrap;transition:color .25s,font-variation-settings .35s}
.appel:hover{color:var(--accent);font-variation-settings:"opsz" 120,"WONK" 0,"wght" 700}

/* fil d'Ariane */
.ariane{display:flex;flex-wrap:wrap;gap:4px 10px;color:var(--gris)}
.ariane a{text-decoration:none;min-height:24px}
.ariane a:hover{color:var(--accent)}

/* ==========================================================================
   Pied : le colophon
   ========================================================================== */
.pied{margin-top:clamp(40px,6vw,80px);background:var(--encre);color:var(--papier)}
.pied-in{width:min(var(--large),100% - 2*var(--bord));margin-inline:auto;padding:clamp(40px,6vw,72px) 0 34px}
.pied .g{row-gap:30px}
.pied .logo-3d,.pied .logo-nom{color:var(--papier)}
.pied .logo-o{color:#F08A5B}
.pied .cap{color:var(--pale);margin-bottom:10px;display:block}
.pied p{font-size:.98rem;line-height:1.6;max-width:44ch}
.pied a{background-image:linear-gradient(var(--pale),var(--pale))}
.pied a:hover{color:var(--encre)}
.pied .logo{background:none;padding-bottom:0}
.pied .logo:hover{color:inherit}
.pied-bas{border-top:1px solid rgba(243,241,236,.28);margin-top:34px;padding-top:16px;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between;font-size:.84rem;color:var(--pale)}

/* pages simples (mentions, merci, 404) */
.simple h1{font-size:clamp(2.3rem,6vw,4.4rem);max-width:16ch}
.simple h2{font-size:1.6rem;font-weight:520;margin:1.6em 0 .4em;font-variation-settings:"opsz" 40,"WONK" 0}
.grosfolio{font:italic 300 clamp(6rem,22vw,15rem)/.8 var(--titre);font-variation-settings:"opsz" 144,"WONK" 0;color:var(--accent);letter-spacing:-.05em}

/* photos libres : couleurs naturelles, étalonnage très léger pour les accorder au papier */
.fig--ill .fig-im img{filter:saturate(.92) contrast(1.03)}

/* courrier des lecteurs : les avis, en colonnes de journal (3 à 6 lettres de longueurs inégales) */
.avis{columns:1;column-gap:var(--gout);border-top:1px solid var(--encre)}
.avis-i{break-inside:avoid;padding:26px 0 26px;border-bottom:1px solid var(--filet);position:relative}
.avis-i blockquote{margin:0}
.avis-i blockquote p{font:italic 400 clamp(1.18rem,1.7vw,1.36rem)/1.38 var(--titre);font-variation-settings:"opsz" 30,"WONK" 0;letter-spacing:-.004em;text-indent:-.62em;padding-left:.62em}
.avis-i blockquote p::before{content:"«\00a0";color:var(--accent);font-style:normal;font-weight:700}
.avis-i blockquote p::after{content:"\00a0»";color:var(--accent);font-style:normal;font-weight:700}
.avis-i figcaption{margin-top:16px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding-left:.62em}
.avis-i figcaption b{font:650 1rem/1.2 var(--texte)}
.avis-i figcaption b::before{content:"";display:inline-block;width:22px;height:2px;background:var(--accent);vertical-align:middle;margin-right:10px}
.avis-i figcaption span{font:600 .7rem/1.3 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
@media (min-width:760px){.avis{columns:2}}
@media (min-width:1200px){.avis{columns:3;column-rule:1px solid var(--filet-fin)}}

.ouv .fig-im[style]{height:auto}
@media (max-width:719px){.tab caption{display:block}.folio span:last-child{display:none}}


/* ==========================================================================
   La pièce en coupe (figure 1) : parois, remplissage, couches, plateau
   ========================================================================== */
.coupe{border-top:1px solid var(--encre);padding-top:clamp(26px,4vw,44px)}
.coupe-fig{position:relative;max-width:440px;margin-inline:auto}
.coupe svg{display:block;width:100%;height:auto;overflow:visible}
.coupe .c-paroi{stroke:var(--encre);stroke-width:7;stroke-linecap:round}
.coupe .c-plein{stroke:var(--encre);stroke-width:7;stroke-linecap:round}
.coupe .c-rempl{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:9 13}
.coupe .c-plateau{stroke:var(--encre);stroke-width:2}
.coupe .c-hach{stroke:var(--gris);stroke-width:1;opacity:.6}
.coupe .c-buse path{fill:var(--accent)}
.coupe .c-buse rect{fill:var(--encre)}
.coupe .c-rep line{stroke:var(--gris);stroke-width:1}
.coupe .c-rep circle{fill:var(--papier);stroke:var(--encre);stroke-width:1.3}
.coupe .c-rep text{font:700 13px var(--texte);fill:var(--encre);text-anchor:middle}
.coupe-compte{display:flex;align-items:baseline;gap:10px;margin-top:10px;padding-top:9px;border-top:1px solid var(--filet);color:var(--gris)}
.coupe-compte b{font:italic 600 1.5rem/1 var(--titre);color:var(--accent);font-variant-numeric:tabular-nums lining-nums;letter-spacing:0;text-transform:none;min-width:3.6em;white-space:nowrap}
.coupe-leg{counter-reset:rep}
.coupe-leg>div{display:grid;grid-template-columns:34px 1fr;gap:2px 10px;padding:15px 0 16px;border-top:1px solid var(--filet)}
.coupe-leg>div:first-child{border-top:1px solid var(--encre)}
.coupe-leg>div::before{counter-increment:rep;content:counter(rep);grid-row:1/3;width:26px;height:26px;border:1.3px solid var(--encre);border-radius:50%;display:grid;place-items:center;font:700 .8rem/1 var(--texte);margin-top:2px}
.coupe-leg dt{font:560 1.22rem/1.2 var(--titre);font-variation-settings:"opsz" 36,"WONK" 0}
.coupe-leg dd{grid-column:2;color:var(--encre);font-size:1rem;max-width:52ch}

/* pied : les liens du réseau et des villes */
.pied-liens{border-top:1px solid rgba(243,241,236,.28);margin-top:34px;padding-top:22px}
.pied-liens ul{display:flex;flex-wrap:wrap;gap:0 22px}
.pied-liens li{display:flex;align-items:center;min-height:44px}
.pied-liens+.pied-bas{margin-top:22px}

/* logo : trois couches empilées entre « 3D » et le nom */
.logo-o rect{fill:currentColor}

/* masques des titres révélés ligne par ligne : la place des jambages et des accents */
[data-m="titre"]>div,[data-m-i="titre"]>div{padding-block:.1em .16em;margin-block:-.1em -.16em}

/* --- kit d'animation commun (motion.css) --- */
.m [data-m-intro]{visibility:hidden;animation:m-secours 0s 1.2s forwards}
@keyframes m-secours{to{visibility:visible}}
.m-pret [data-m-intro]{visibility:visible;animation:none}
.m-buse{position:absolute;left:0;right:0;height:2px;top:100%;background:var(--m-accent,#f97316);box-shadow:0 0 14px 2px var(--m-accent,#f97316);pointer-events:none;z-index:2;opacity:0}
.m-fil{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--m-fil-1,#2563eb),var(--m-accent,#f97316));z-index:60;pointer-events:none}
[data-m="aimant"]{will-change:transform}
@media (prefers-reduced-motion:reduce){.m [data-m-intro]{visibility:visible;animation:none}.m-fil,.m-buse{display:none}}