@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/caveat-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/caveat-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/caveat-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/caveat-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/caveat-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/caveat-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/jost-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/jost-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jost-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jost-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jost-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jost-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jost-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/jost-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


html,body{margin:0}img{max-width:100%}[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Inspiré du modèle « Carousel » : fond blanc, logo centré, menu centré, une grande photo à la fois,
   flèches fines, bande de vignettes. Écran fixe, chaque entrée du menu est une page.
   Thème clair assumé (le logo est sur fond blanc). */
:root{
  --bg:#ffffff; --band:#f6f6f5; --ink:#3c3f42; --dim:#8b8f93; --line:#e4e4e2; --or:#e8742a;
  --f:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f);font-weight:300;font-size:15px;line-height:1.6;overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.app{height:100%;display:flex;flex-direction:column;position:relative;z-index:1}
/* fond : quadrillage de feuille de dessin technique (petits carreaux 10 px, gros carreaux 50 px) */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(70,100,130,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,100,130,.022) 1px,transparent 1px),
    linear-gradient(rgba(70,100,130,.01) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,100,130,.01) 1px,transparent 1px);
  background-size:50px 50px,50px 50px,10px 10px,10px 10px;background-position:-1px -1px}
/* fond : croquis au crayon d'une chambre, à peine visible sur le blanc */
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  /* agrandi et remonté pour que le placard et les poutres passent aussi derrière le logo */
  background:url(/img/fond-croquis.webp) 96% 45%/max(145vw,165vh) auto no-repeat;opacity:.05;mix-blend-mode:multiply}

/* En-tête */
header{flex:none;display:grid;justify-items:center;gap:56px;padding:22px var(--gr) 48px var(--gl)}
/* Tampon « 3D réalisés sans IA », façon tampon encreur d'architecte */
.stamp{position:absolute;right:16px;bottom:16px;z-index:2;width:132px;height:132px;transform:rotate(-9deg);
  border-radius:50%;background:rgba(242,245,247,.9);box-shadow:0 2px 10px rgba(31,59,92,.18)}
.stamp svg{width:100%;height:100%;display:block}
.brand{display:inline-grid;justify-items:center;gap:6px}
.brand .gold{width:100%;height:auto;display:block;filter:drop-shadow(0 1px 1px rgba(120,90,10,.25))}
.logo{position:relative;display:block}
.logo img{height:58px;width:auto;filter:drop-shadow(0 0 1px #fff) drop-shadow(2px 3px 2px rgba(30,32,20,.35)) drop-shadow(4px 8px 12px rgba(30,32,20,.28))}
/* reflet de lumière blanche qui passe sur les lettres du logo */
.logo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.0) 44%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 56%,transparent 60%);
  background-size:300% 100%;background-position:120% 0;
  -webkit-mask:url(/img/logo-transp.webp) center/contain no-repeat;mask:url(/img/logo-transp.webp) center/contain no-repeat;
  animation:sheen 5.5s ease-in-out 1s infinite}
@keyframes sheen{0%{background-position:120% 0}35%,100%{background-position:-20% 0}}
@media (prefers-reduced-motion:reduce){.logo::after{animation:none;opacity:0}}
nav ul{list-style:none;margin:0;padding:0;display:flex;gap:6px 30px;flex-wrap:wrap;justify-content:center}
nav a{font-size:12.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:4px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
nav a:hover{color:var(--or)}
nav a[aria-current="page"]{color:var(--or);border-bottom-color:var(--or)}
/* menu en icônes réparties régulièrement sur toute la largeur */
header nav{width:100%}
nav ul{align-items:center;justify-content:space-evenly;flex-wrap:nowrap;gap:8px;width:100%}
/* icônes en pastilles-boutons + petit saut en vague toutes les 5 s */
nav a.ic{display:grid;justify-items:center;gap:8px;padding:6px 0 0;border-bottom:0}
nav a.ic .tile{width:96px;height:96px;border-radius:24px;background:#fff;display:grid;place-items:center;
  box-shadow:0 1px 0 rgba(0,0,0,.04),0 6px 14px -4px rgba(40,50,10,.22),inset 0 -3px 0 rgba(176,199,59,.35);
  transition:box-shadow .2s;transform-origin:50% 100%}
/* une pastille au hasard fait un petit saut toutes les 2 s (classe posée par le script) */
nav a.ic .tile.hop{animation:hop .7s ease-in-out}
@keyframes hop{0%,100%{transform:none}35%{transform:translateY(-10px) rotate(-4deg)}70%{transform:translateY(0) scale(1.04,.96)}}
nav a.ic img{width:68px;height:68px;object-fit:contain}
nav a.ic small{order:-1;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;padding-bottom:3px;border-bottom:2px solid transparent}
nav a.ic:hover .tile{animation-play-state:paused;transform:translateY(-4px);box-shadow:0 14px 24px -8px rgba(40,50,10,.3),inset 0 -3px 0 rgba(232,116,42,.6)}
nav a.ic:active .tile{transform:translateY(1px);box-shadow:0 2px 6px -2px rgba(40,50,10,.3),inset 0 -1px 0 rgba(176,199,59,.5)}
nav a.ic:hover small,nav a.ic[aria-current="page"] small{color:var(--or)}
nav a.ic[aria-current="page"] small{border-bottom-color:var(--or)}
nav a.ic[aria-current="page"] .tile{box-shadow:0 6px 14px -4px rgba(40,50,10,.22),inset 0 -3px 0 var(--or)}
@media (prefers-reduced-motion:reduce){nav a.ic .tile{animation:none}}
nav a:focus-visible,.arrow:focus-visible,.thumbs button:focus-visible,.steps3 button:focus-visible{outline:1px solid var(--or);outline-offset:3px}

main{flex:1;min-height:0;position:relative}
.page{position:absolute;inset:0;display:none;flex-direction:column;min-height:0}
.page.on{display:flex;animation:fade .4s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.page.on{animation:none}.slide{transition:none!important}}

/* Galerie */
.stage{flex:1;min-height:0;position:relative;background:transparent;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:stretch}
.frame{position:relative;min-width:0;min-height:0;touch-action:pan-y}
.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s ease}
.slide.on{opacity:1}
.arrow{display:grid;place-items:center;color:var(--ink);opacity:.7;transition:opacity .2s}
.arrow:hover{opacity:1}
.arrow svg{width:22px;height:40px}
.cap{flex:none;display:flex;justify-content:center;padding:12px var(--gr) 8px var(--gl)}
/* légende façon cartouche d'architecte, comme sur l'accueil */
.carto{display:inline-flex;flex-wrap:wrap;border-top:1px solid #1f3b5c;border-left:1px solid #1f3b5c;background:rgba(242,245,247,.94);color:#1f3b5c;max-width:100%}
/* chaque case porte sa bordure droite et basse : la grille reste complète même quand le cartouche passe sur plusieurs lignes */
.carto > div{display:grid;gap:1px;padding:5px 14px;border-right:1px solid #1f3b5c;border-bottom:1px solid #1f3b5c;text-align:left;min-width:0;flex:1 1 auto}
.carto small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.carto b{font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.carto .x b{text-transform:none;letter-spacing:0;font-weight:400;white-space:normal}
.carto .steps3{color:#1f3b5c}
.carto .steps3 button{color:rgba(31,59,92,.55);font-weight:500}
.carto .steps3 button[aria-current="true"]{color:var(--or)}
.carto .steps3 i{border-top-color:rgba(31,59,92,.35);width:18px;margin:0 6px}
@media (max-width:760px){.carto .n{display:none}
  body.gal-on #gallery .stage{flex:0 0 auto;height:calc((100vw - 2*max(16px,env(safe-area-inset-left,0px)))*.75)}
  .carto > div{padding:4px 9px}.carto .x{flex-basis:100%;order:9}}
.cap .t{font-weight:400;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.cap .p{color:var(--dim);font-size:13px}
.steps3{display:inline-flex;gap:0;align-items:center;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.steps3 button{padding:2px 2px;color:var(--dim)}
.steps3 button[aria-current="true"]{color:var(--or)}
.steps3 i{display:inline-block;width:26px;border-top:1px solid var(--line);margin:0 8px;transform:translateY(-3px)}
.thumbs{flex:none;display:flex;gap:4px;overflow-x:auto;padding:6px var(--gr) 16px var(--gl);scrollbar-width:thin;justify-content:safe center}
.thumbs button{flex:none;width:92px;height:62px;position:relative;opacity:.55;transition:opacity .2s;outline-offset:2px}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.thumbs button:hover{opacity:.9}
.thumbs button[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px var(--or)}
.thumbs .gap{flex:none;width:14px}
.thumbs .k{position:absolute;left:3px;bottom:3px;background:rgba(255,255,255,.88);font-size:9px;letter-spacing:.1em;padding:1px 4px;text-transform:uppercase;font-weight:500}

/* Pages texte */
.text{flex:1;overflow:auto;padding:26px var(--gr) 30px var(--gl)}
.col{max-width:980px;margin:0 auto;display:grid;gap:34px}
.col h1{font-weight:300;font-size:clamp(26px,3.2vw,38px);letter-spacing:.02em;margin:0;text-align:center;text-wrap:balance}
.col h1 span{color:var(--or)}
.lead{max-width:60ch;margin:0 auto;text-align:center;color:var(--dim);font-size:16px}
.h2{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;margin:0 0 14px;color:var(--ink)}
.method{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.method div{border-top:1px solid var(--ink);padding-top:12px;display:grid;gap:6px;align-content:start}
.method b{font-weight:400;font-size:17px}
.method b small{color:var(--or);font-size:13px;letter-spacing:.1em;margin-right:6px}
.method p{margin:0;color:var(--dim)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.two img{width:100%;aspect-ratio:16/10;object-fit:cover}
.skills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.skills ul{list-style:none;margin:0;padding:0;color:var(--dim);display:grid;gap:3px}
.figs{display:flex;justify-content:center;gap:56px;flex-wrap:wrap;text-align:center;border-top:1px solid var(--line);padding-top:22px}
.figs b{display:block;font-weight:300;font-size:40px;line-height:1;color:var(--ink)}
.figs span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* page À propos : informations légales, une ligne par info */
.legal{margin:0 auto;width:100%;max-width:900px;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;border-top:1px solid var(--line)}
@media (max-width:760px){.legal{grid-template-columns:1fr}}
#a-propos .text{padding-top:0;padding-bottom:12px;border-top:0}
#a-propos .col{gap:18px}
#a-propos .col > h1:first-child{font-size:clamp(26px,2.8vw,34px)}
#a-propos .method p{font-size:14px;line-height:1.5}
/* un seul trait continu au-dessus des 4 étapes */
#a-propos .method{border-top:1px solid var(--line);padding-top:12px}
#a-propos .method div{border-top:0;padding-top:0}
#a-propos .legal div{padding:6px 0}
.legal div{display:grid;gap:0;padding:8px 0;border-bottom:1px solid var(--line);text-align:center}
.legal dt{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.legal dd{margin:0;font-size:17px;color:var(--ink);font-weight:400}
.form{display:grid;gap:14px}
.form label{display:grid;gap:3px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.form input,.form select,.form textarea{font:300 15px var(--f);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:6px 0;border-radius:0;letter-spacing:0;text-transform:none}
.form textarea{min-height:70px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--or)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form button{justify-self:start;border:1px solid var(--ink);padding:11px 26px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;transition:background .2s,color .2s}
.form button:hover{background:var(--ink);color:var(--bg)}
.ok{color:var(--or);min-height:1.4em;font-size:13px}
.form .err{display:none;color:#c0392b;font-size:11px;letter-spacing:.02em;text-transform:none}
.form .invalid .err{display:block}
.form .invalid input{border-bottom-color:#c0392b}
.form .checks{border:0;margin:0;padding:0;display:flex;gap:26px}
.form .checks label{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.08em}
.form .checks input{width:16px;height:16px;accent-color:var(--or);margin:0}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .human b{color:var(--ink);font-weight:500;letter-spacing:.04em}
.form .human input{max-width:120px}
#contact .text{padding-top:0}
#contact .col{gap:14px}
#contact .col > h1:first-child{font-size:clamp(26px,2.8vw,34px)}
#contact .form{gap:10px}
#contact .two{grid-template-columns:1fr;max-width:620px;margin:0 auto;width:100%}
#contact .form textarea{min-height:52px}
.form .sendrow{display:flex;align-items:end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.form .sendrow .human{flex:1;min-width:220px}
/* page Devis : le formulaire devient une fiche papier à cases, remplie « au stylo » */
#contact .form{--encre:#1f3b5c;gap:0;background:#fffefa;border:1.5px solid var(--encre);box-shadow:0 1px 0 #fff inset,0 14px 30px -14px rgba(40,40,30,.35)}
#contact .form .fhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 12px;border-bottom:1.5px solid var(--encre);color:var(--encre);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
#contact .form .fhead b{font-weight:500;font-size:13px}
#contact .form label,#contact .form .checks{color:var(--encre);opacity:1;font-size:10.5px;letter-spacing:.14em}
#contact .form > label,#contact .form .row > label,#contact .form .checks,#contact .form .sendrow{padding:5px 12px 2px;border-bottom:1px solid var(--encre);margin:0}
#contact .form .row{gap:0}
#contact .form .row > label:first-child{border-right:1px solid var(--encre)}
#contact .form input:not([type=checkbox]),#contact .form textarea{font:600 23px/1.15 "Caveat","Segoe Print",cursive;color:#23408e;border:0;padding:2px 0 3px;background:transparent}
#contact .form textarea{min-height:224px;line-height:28px;padding-top:0;background-image:repeating-linear-gradient(transparent 0 27px,rgba(31,59,92,.22) 27px 28px);background-attachment:local}
#contact .form input:focus,#contact .form textarea:focus{background-color:rgba(232,116,42,.05)}
#contact .form .checks{display:flex;gap:28px;align-items:center;padding:7px 12px}
#contact .form .checks label{font-size:11.5px;letter-spacing:.12em;gap:9px}
#contact .form .checks input{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.5px solid var(--encre);background:#fff;display:grid;place-items:center;cursor:pointer}
#contact .form .checks input:checked::after{content:"✗";font:700 20px/1 "Caveat",cursive;color:#23408e;transform:translate(1px,-2px)}
#contact .form .sendrow{border-bottom:0;padding:6px 12px 8px;align-items:center}
#contact .form .sendrow .human{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
#contact .form .human input{max-width:90px;border-bottom:1px dashed var(--encre)}
#contact .form .human b{color:var(--encre)}
#contact .form button{border:1.5px solid var(--encre);color:var(--encre);font-weight:500}
#contact .form button:hover{background:var(--encre);color:#fff}
#contact .form .invalid{background:rgba(192,57,43,.06)}
#contact .form .err{font-size:10.5px;letter-spacing:.04em}
#contact .ok{text-align:center}
/* erreurs dans le coin de leur case : la fiche ne grandit pas quand un champ manque */
#contact .form > label,#contact .form .row > label,#contact .form .sendrow .human{position:relative}
#contact .form .err{position:absolute;top:auto;bottom:8px;right:12px;margin:0;text-align:right;letter-spacing:.06em;text-transform:uppercase;font-size:9.5px}
#contact .form .sendrow .human .err{top:auto;bottom:2px;right:8px;left:auto}
#contact .ok{min-height:1.4em;margin-top:6px;display:block}
#contact .form .row3{grid-template-columns:1fr 1fr 1fr}
#contact .form .row3 > label:nth-child(2){border-right:1px solid var(--encre)}
#contact .form .msgcell{padding:5px 12px 0;border-bottom:1px solid var(--encre)}
#contact .form .msghead{display:flex;justify-content:space-between;align-items:center;gap:8px 20px;flex-wrap:wrap;margin-bottom:3px}
#contact .form .msghead > label{padding:0;border:0}
#contact .form .msghead .checks{padding:0;border:0;gap:20px}
#contact .ok{margin-top:4px}
#contact .text{padding-bottom:6px}
#contact .col > h1:first-child{font-size:clamp(24px,2.4vw,30px)}
/* ordinateur : la case Message s'adapte à la hauteur de l'écran, sans barre de défilement */
@media (min-width:761px){
  #contact #f textarea{min-height:0;height:clamp(64px,calc(100vh - 645px),256px)}
}
/* téléphone : on fait défiler la page, mais sans barre visible */
/* jamais de barre de défilement visible sur cette page (sur très petit écran on peut quand même faire défiler) */
#contact .text{scrollbar-width:none}
#contact .text::-webkit-scrollbar{display:none}
/* case Message : feuille de calepin à petits carreaux, trait noir fin (motif en tuiles de 16 px : lignes nettes, sans effet d'escalier) */
#contact .form textarea{min-height:256px;line-height:32px;padding:6px 8px 0 16px;margin:0 -12px -4px;width:calc(100% + 24px);box-sizing:border-box;
  background-color:#fffefa;background-attachment:local;
  background-image:linear-gradient(to bottom,rgba(20,20,20,.22) 1px,transparent 1px),linear-gradient(to right,rgba(20,20,20,.22) 1px,transparent 1px);
  background-size:16px 16px;background-position:0 -1px,-1px 0}
@media (max-width:760px){#contact .form .row,#contact .form .row3{grid-template-columns:1fr}#contact .form .row > label{border-right:0!important}}
/* grille de chantiers */
.chgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px;padding:6px 0 10px}
.chtile{position:relative;display:block;width:min(340px,100%);aspect-ratio:4/3;background:#f2f5f7;border:3px solid #fff;
  box-shadow:0 0 22px 4px rgba(184,200,15,.35),0 18px 30px -16px rgba(30,40,10,.35);transition:transform .25s,box-shadow .25s}
.chtile img{width:100%;height:100%;object-fit:cover;display:block}
.chtile:hover,.chtile:focus-visible{transform:translateY(-5px);box-shadow:0 0 30px 8px rgba(184,200,15,.5),0 26px 36px -18px rgba(30,40,10,.4);outline:none}
.chtile .steps{position:absolute;top:10px;right:10px;background:#fff;color:var(--or);font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;font-weight:500}
.chtile .carto.mini{position:absolute;left:10px;right:10px;bottom:10px;display:flex;justify-content:space-between;align-items:end;gap:10px;padding:6px 10px;border:1px solid #1f3b5c}
.chtile .carto.mini > span{display:grid;gap:1px;padding:0;border:0}
.chtile .carto.mini small{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.chtile .carto.mini b{font-size:13px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.chtile .go{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--or);white-space:nowrap}
#liste .col > h1{font-size:clamp(26px,2.8vw,34px)}
/* ordinateur : 3 colonnes de vignettes minimum */
@media (min-width:761px){
  /* 3 vignettes par ligne ; une ligne incomplète reste centrée */
  .chgrid{display:flex;flex-wrap:wrap;justify-content:center;width:100%;max-width:952px;margin:0 auto;box-sizing:border-box}
  .chtile{width:calc((100% - 52px)/3)}
}
/* lien retour dans l'article */
.cap{align-items:center;gap:14px;flex-wrap:wrap}
.cap .back{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);background:#fff;padding:8px 12px;white-space:nowrap}
.cap .back:hover{color:var(--or);border-color:var(--or)}
/* photos des chantiers : cadre blanc fin + halo vert, comme sur l'accueil (le cadre épouse la photo) */
#gallery .slide{inset:0;margin:auto;width:auto;height:auto;max-width:calc(100% - 6px);max-height:calc(100% - 6px);
  border:3px solid #fff;box-shadow:0 0 30px 6px rgba(184,200,15,.55),0 0 70px 16px rgba(196,214,20,.28),0 20px 40px -18px rgba(30,40,10,.25)}
#gallery .frame{margin:14px 0}
/* lueur blanche qui déborde du cadre sur la photo (calque posé sur la photo affichée) */
#gallery .glow .tag{position:absolute;top:26px;right:10px;background:#fff;color:var(--or);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;font-weight:500;box-shadow:0 2px 6px rgba(0,0,0,.12)}
/* photos « après » : travelling cinéma (copie recadrée sous la lueur) */
#gallery .kbwrap{position:absolute;z-index:2;overflow:hidden;pointer-events:none}
#gallery .kbwrap > div{position:absolute;inset:0;background-size:cover;background-position:center}
#gallery .kbwrap.play > div{animation:kb 5s cubic-bezier(.2,.6,.3,1) both}
@keyframes kb{from{opacity:0;transform:scale(1.14) translate(2%,1.5%)}25%{opacity:1}to{opacity:1;transform:none}}
/* tag A + trait or : mise au point en bas à droite */
#gallery .glow .tagA{position:absolute;right:4%;bottom:4%;height:clamp(30px,13%,58px);display:flex;flex-direction:column;align-items:center;gap:3%;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));animation:focusA 1.3s cubic-bezier(.2,.7,.2,1) .9s both}
#gallery .glow .tagA img{height:68%;width:auto;display:block}
#gallery .glow .tagA .gold{height:28%;width:auto;aspect-ratio:140/40;display:block;filter:drop-shadow(0 1px 1px rgba(80,60,0,.45))}
@keyframes focusA{from{opacity:0;filter:blur(10px);transform:scale(1.35)}to{opacity:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));transform:none}}
@media (prefers-reduced-motion:reduce){#gallery .glow .tagA{animation:none}}
#gallery .glow{position:absolute;z-index:3;pointer-events:none;box-shadow:inset 0 0 6px 2px rgba(255,255,255,.95),inset 0 0 26px 6px rgba(255,255,255,.55),inset 0 0 60px 10px rgba(255,255,255,.18);transition:opacity .3s}
/* dessin crayon par-dessus la 1re photo du chantier */
.frame .gsketch{position:absolute;z-index:2;pointer-events:none;opacity:0;transition:opacity .3s}
.frame .gsketch.on{opacity:1}
/* main de swipe sous la photo (téléphone) */
.ghand{position:static;transform:none;margin:2px auto 0;flex:none}
#gallery .stage{order:1} #gallery .ghand{order:2;position:static!important;left:auto;bottom:auto;transform:none!important;margin:6px auto 0} #gallery .cap{order:3} #gallery .thumbs{order:4}
#gallery .stage .frame{grid-column:2}
@media (max-width:760px){ #gallery .stage .arrow{visibility:hidden;overflow:hidden}
  /* petit écart à gauche et à droite de la photo */
  #gallery .stage{grid-template-columns:0 minmax(0,1fr) 0;padding-left:var(--gl);padding-right:var(--gr)} }
/* téléphone en paysage : diaporama plein écran, sans menu */
@media (orientation:landscape) and (max-height:520px) and (pointer:coarse){
  body.gal-on header,body.gal-on #gallery .cap,body.gal-on #gallery .thumbs,body.gal-on .ghand{display:none!important}
  body.gal-on #gallery .stage{flex:1 1 auto!important;height:auto!important;grid-template-columns:0 minmax(0,1fr) 0}
  body.gal-on #gallery .stage .arrow{visibility:hidden}
  body.gal-on main{height:100%}
}
/* bouton plein écran (ordinateur) */
#gallery .stage{position:relative}
.fsbtn{position:absolute;z-index:6;white-space:nowrap;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--ink);
  padding:7px 11px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 4px 12px -6px rgba(0,0,0,.25);transition:color .2s,border-color .2s}
.fsbtn:hover{color:var(--or);border-color:var(--or)}
.fsbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fsbtn .close{display:none}
body.fs .fsbtn .open{display:none} body.fs .fsbtn .close{display:inline}
@media (max-width:760px),(pointer:coarse){.fsbtn{display:none}#gallery .glow .tag{top:10px}}
/* mode plein écran : seul le diaporama reste, comme le téléphone couché */
body.fs header,body.fs #gallery .cap,body.fs #gallery .thumbs,body.fs .ghand{display:none!important}
body.fs main{height:100%}
body.fs #gallery .stage{flex:1 1 auto!important;height:auto!important}
body.fs #gallery .frame{margin:24px 0}
/* page Devis : message qui remplace la fiche après l'envoi */
#contact .form[hidden],#contact .res[hidden]{display:none!important}
#contact .res{--encre:#1f3b5c;--stylo:#23408e;position:relative;background:#fffefa;border:1.5px solid var(--encre);box-shadow:0 14px 30px -14px rgba(40,40,30,.35);color:var(--encre)}
#contact .res .fhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding:8px 12px;border-bottom:1.5px solid var(--encre);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
#contact .res .fhead b{font-weight:500;font-size:13px}
#contact .res .rbody{padding:20px 20px 18px;display:grid;gap:12px;justify-items:center;text-align:center;
  background-image:linear-gradient(to bottom,rgba(20,20,20,.07) 1px,transparent 1px),linear-gradient(to right,rgba(20,20,20,.07) 1px,transparent 1px);background-size:16px 16px}
#contact .res .rstamp{width:112px;height:112px;border-radius:50%;display:grid;place-items:center;transform:rotate(-10deg);border:3px solid currentColor;
  box-shadow:inset 0 0 0 2px #fffefa,inset 0 0 0 4px currentColor;font:500 13px/1.15 "Jost";letter-spacing:.14em;text-transform:uppercase;text-align:center;opacity:.92;
  animation:rstamp .55s cubic-bezier(.2,1.4,.4,1) .1s both}
#contact .res .rstamp b{display:block;font-size:30px;line-height:1;letter-spacing:0;margin-bottom:2px}
#contact .res.ok-st .rstamp{color:#3d8b4f} #contact .res.ko-st .rstamp{color:#c0392b}
@keyframes rstamp{from{opacity:0;transform:rotate(-10deg) scale(2.2)}60%{opacity:1}to{opacity:.92;transform:rotate(-10deg) scale(1)}}
#contact .res .fd{animation:rfade .5s ease .45s both}
@keyframes rfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
#contact .res .big{margin:0;font:700 34px/1.1 "Caveat","Segoe Print",cursive;color:var(--stylo);text-wrap:balance;overflow-wrap:anywhere;max-width:100%}
@media (max-width:760px){#contact .res .big{font-size:28px}}
#contact .res .msg{margin:0;max-width:44ch;color:var(--ink);font-size:15.5px}
#contact .res .recap{width:100%;max-width:470px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--encre);background:#fffefa;text-align:left}
#contact .res .recap div{padding:5px 9px;border-right:1px solid var(--encre);min-width:0}
#contact .res .recap div:last-child{border-right:0}
#contact .res .recap small{display:block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
#contact .res .recap span{font:600 19px/1.15 "Caveat",cursive;color:var(--stylo);overflow-wrap:anywhere}
#contact .res .sig{font:600 24px/1.1 "Caveat",cursive;color:var(--stylo)}
#contact .res .sig small{display:block;font:400 12px "Jost";letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:4px}
#contact .res .btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
#contact .res .rb{border:1.5px solid var(--encre);background:#fff;color:var(--encre);padding:9px 18px;font:500 12px "Jost";letter-spacing:.14em;text-transform:uppercase;cursor:pointer;text-decoration:none}
#contact .res .rb:hover{background:var(--encre);color:#fff}
#contact .res .rb.pri{background:var(--encre);color:#fff}#contact .res .rb.pri:hover{background:var(--or);border-color:var(--or)}
#contact .res .note{margin:0;font-size:13px;color:var(--dim);max-width:46ch}
@media (max-width:760px){#contact .res .recap{grid-template-columns:1fr}#contact .res .recap div{border-right:0;border-bottom:1px solid var(--encre)}#contact .res .recap div:last-child{border-bottom:0}}
@media (prefers-reduced-motion:reduce){#contact .res .rstamp,#contact .res .fd{animation:none}}
/* À propos : zone d'intervention + informations légales, deux colonnes de même hauteur */
#a-propos .zone2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:stretch;margin-top:20px}
#a-propos .zcol{display:flex;flex-direction:column;gap:12px;min-width:0}
#a-propos .col h1.sub{font-size:clamp(20px,2.2vw,26px);margin:0}
#a-propos .zcol .legal{grid-template-columns:1fr 1fr;column-gap:22px;max-width:none;margin:0;flex:1;align-content:space-between}
#a-propos .zcol .legal div{padding:6px 0}
#a-propos .zcol .legal dd{font-size:15px}
#a-propos .carte{flex:1;min-height:220px;width:100%;border:3px solid #fff;background:#dfe6ea;
  box-shadow:0 0 22px 4px rgba(184,200,15,.4),0 14px 26px -16px rgba(30,40,10,.35)}
.cm-lbl{background:rgba(255,255,255,.88);border:0;box-shadow:0 1px 3px rgba(0,0,0,.25);padding:0 5px;font:500 10px Jost,system-ui,sans-serif;color:#1f3b5c}
.cm-lbl::before{display:none}
.cm-lbl.siege{color:#c8561a;font-weight:600}
#a-propos .leaflet-control-attribution{font-size:9px}
@media (max-width:760px){#a-propos .zone2{grid-template-columns:1fr;gap:26px}#a-propos .carte{flex:none;height:300px}#a-propos .zcol .legal{grid-template-columns:1fr}}
.ok.done{color:var(--ink);font-size:15px;line-height:1.5}
.ok.fail{color:#c0392b}
.coord{display:grid;gap:14px;color:var(--dim)}
.coord b{color:var(--ink);font-weight:400}
.coord dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:13.5px}
.coord dt{color:var(--ink)}
.coord dd{margin:0}

/* Accueil : plan technique qui se fond dans la photo */
.home{flex:1;min-height:0;display:grid;place-items:center;padding:22px var(--gr) 30px var(--gl);background:transparent;container-type:size}
.hbox{position:relative;width:min(100cqw,100cqh*16/10,1400px);aspect-ratio:16/10;max-width:100%;background:#f2f5f7;border:3px solid #fff;
  box-shadow:0 0 30px 6px rgba(184,200,15,.55),0 0 90px 22px rgba(196,214,20,.32),0 24px 50px -18px rgba(30,40,10,.25)}
.hbox canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .3s}
.home{position:relative;padding-left:max(64px,var(--gl));padding-right:max(64px,var(--gr))}
.harrow{position:absolute;top:0;bottom:30px;width:60px;z-index:3}
.hdots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:10px;z-index:3}
.hdots button{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s}
.hdots button[aria-current="true"]{background:var(--or);transform:scale(1.25)}
.hdots button:focus-visible{outline:1px solid var(--or);outline-offset:3px}
/* main qui montre le geste de balayage, sous la photo */
.hhand{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);z-index:3;width:46px;height:40px;opacity:.85;display:none}
.hhand:hover{opacity:1}
.hhand:focus-visible{outline:1px solid var(--or);outline-offset:3px}
.hhand svg{width:100%;height:100%;overflow:visible}
.hhand .finger{animation:fingerSwipe 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.hhand .trail{opacity:0;animation:trail 2.6s ease-in-out infinite}
/* l'arc droit s'allume quand le doigt est à droite (50 %), l'arc gauche quand il est à gauche (0 %/100 %) */
.hhand .trail.l{animation-delay:1.3s}
@keyframes fingerSwipe{0%,100%{transform:translateX(-9px) rotate(-8deg)}50%{transform:translateX(9px) rotate(8deg)}}
@keyframes trail{0%,38%{opacity:0}50%{opacity:.9}64%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hhand .finger,.hhand .trail{animation:none}}
/* lumière blanche qui déborde un peu du cadre sur la photo */
.hbox::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 6px 2px rgba(255,255,255,.95),inset 0 0 26px 6px rgba(255,255,255,.55),inset 0 0 60px 10px rgba(255,255,255,.18)}
.hbox .cartouche,.hbox .enter,.hbox .stamp{z-index:2}
.cartouche{position:absolute;left:14px;bottom:14px;background:rgba(242,245,247,.94);border:1px solid #1f3b5c;color:#1f3b5c;display:grid;grid-template-columns:auto auto;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;min-width:0;max-width:calc(100% - 36px)}
.cartouche div{padding:6px 10px;border-right:1px solid #1f3b5c;border-bottom:1px solid #1f3b5c}
.cartouche div:nth-child(2n){border-right:0}
.cartouche div:nth-last-child(-n+2){border-bottom:0}
.cartouche b{display:block;font-weight:500;font-size:12.5px;letter-spacing:.06em}
.cartouche .big{grid-column:span 2;border-right:0;font-size:12px}
.cartouche .big b{font-size:17px;letter-spacing:.04em;text-transform:none;font-weight:400}
.enter{position:absolute;right:14px;bottom:14px;background:#fff;color:var(--ink);border:1px solid var(--ink);padding:12px 22px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;transition:background .2s,color .2s}
.enter:hover{background:var(--ink);color:#fff}
.enter:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.logo{border-radius:2px}
.logo:focus-visible{outline:1px solid var(--or);outline-offset:6px}

/* accueil : les pastilles du menu mordent à moitié sur le haut de l'image */
body.home-on header{position:relative;z-index:5;padding-bottom:0;margin-bottom:-50px}
body.home-on .home{padding-top:0;place-items:start center}
@media (max-width:760px){
  body.home-on header{margin-bottom:-34px}
  .home{place-items:center;padding-top:16px;padding-bottom:48px}
  .hbox{border-width:2px;aspect-ratio:2/3;width:min(100cqw,100cqh*2/3)}
  .cartouche{bottom:8px;left:8px;font-size:8.5px;max-width:calc(100% - 132px)}
  .cartouche .big b{font-size:13px}
  .cartouche div{padding:4px 7px}
  .enter{right:8px;bottom:8px;padding:9px 14px}
  .stamp{width:112px;height:112px;right:8px;bottom:8px}
  .home{padding-left:var(--gl);padding-right:var(--gr)}
  .harrow{display:none}
  .hdots{display:none}
  .hhand{display:block}
  header{gap:36px;padding-top:14px;padding-bottom:30px}
  .logo img{height:40px}
  nav a.ic .tile{width:min(64px,16vw);height:min(64px,16vw);border-radius:16px}
  nav a.ic img{width:min(46px,11.5vw);height:min(46px,11.5vw)}
  nav a.ic small{font-size:8.5px;letter-spacing:.04em}
  nav ul{gap:4px;padding-bottom:2px}
  .stage{grid-template-columns:40px minmax(0,1fr) 40px}
  .thumbs button{width:64px;height:46px}
  .method,.skills{grid-template-columns:1fr 1fr}
  .two,.form .row{grid-template-columns:1fr}
}
@media (max-width:440px){.method,.skills{grid-template-columns:1fr}}

/* --- ajouts du vrai site --- */
html:has(body.flow),body.flow{height:auto}
body.flow{overflow:visible;overflow-x:hidden}
body.flow .app{height:auto;min-height:100vh}
body.flow main{flex:none}
body.flow .page{position:static}
body.flow .text{overflow:visible;flex:none}
/* devis : les champs ne doivent pas élargir la fiche (sinon elle se décale à droite) */
#contact .two>*,#contact .form .row>*,#contact .form input{min-width:0}
/* accueil, téléphone : le cartouche garde sa place à côté du tampon, mais s'élargit si un mot est trop long
   (ex. « Plomodiern », ou texte agrandi dans les réglages du téléphone) au lieu d'être coupé par la bordure */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (max-width:760px){.hbox .cartouche{z-index:3;right:124px;max-width:none;width:fit-content}}
.cartouche{line-height:17px}.cartouche b{line-height:20px}.cartouche .big b{line-height:27px}
@media (max-width:760px){.cartouche{line-height:14px}.cartouche b{line-height:20px}.cartouche .big b{line-height:21px}}
/* accueil : le glissement horizontal du doigt change la photo (sinon le téléphone l'annule) */
#home{touch-action:pan-y}
/* chantier, téléphone couché : invitation au plein écran */
.fshint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:7;pointer-events:none;white-space:nowrap;background:rgba(31,59,92,.88);color:#fff;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:999px;box-shadow:0 6px 16px -8px rgba(0,0,0,.4);animation:fshint 5s ease forwards}
@keyframes fshint{0%,75%{opacity:1}100%{opacity:0}}
@media not ((orientation:landscape) and (max-height:520px) and (pointer:coarse)){.fshint{display:none}}
.col h2.sub{font-weight:300;letter-spacing:.02em;text-align:center;text-wrap:balance;font-size:clamp(20px,2.2vw,26px);margin:0}
.col h2.sub span{color:var(--or)}
.intro-cat{max-width:64ch;margin:-18px auto 0;text-align:center;color:var(--dim);font-size:15px;line-height:1.55}
.carto h1.cap-h1{margin:0;font:inherit;font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:inherit;text-align:left}
.rgpd{margin:10px auto 0;max-width:62ch;text-align:center;font-size:12px;color:var(--dim)}
.rgpd a,.legal-lien a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.legal-lien{margin:8px 0 0;text-align:center;font-size:12.5px;color:var(--dim)}
.mentions{max-width:760px;margin:0 auto;display:grid;gap:6px;text-align:left}
.mentions h2{font-weight:500;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#1f3b5c;margin:18px 0 2px}
.mentions p,.mentions li{margin:0;color:var(--ink);font-size:15px;line-height:1.6}
.mentions ul{margin:0;padding-left:18px}
.erreur404{display:grid;gap:14px;justify-items:center;text-align:center}
.erreur404 a{border:1.5px solid #1f3b5c;color:#1f3b5c;padding:9px 18px;text-decoration:none;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}