[hidden]{display:none!important}
/* ==========================================================
   Titouan Frébourg · site vitrine · v6
   Sobre et aligné à gauche : fond blanc cassé, encre, un vert uni.
   Le seul dégradé du site est le nom en grand dans le pied de page.
   Site en clair uniquement (pas de mode sombre). Typo : DM Sans.
   Contrastes vérifiés (WCAG) : texte courant et texte secondaire à plus de 7:1, vert et libellés à plus de 4,5:1 sur tous les fonds.
   ========================================================== */
:root{
  color-scheme:light;
  --bg:#FFFEFA; --card:#F4F3EF; --card-2:#ECEBE5; --surface:#FFFFFF;
  --soft:#F4F3EF; --soft-2:#E6F1EA;
  --ink:#0F0F0F; --ink-2:#3B3B38; --muted:#595752; --line:#E4E2DA; --line-2:#C9C7BE;
  --accent:#08743F; --accent-strong:#06522E; --on-accent:#FFFFFF; --vivid:#08743F; --turq:#0B7C8C;
  --grad:linear-gradient(#08743F,#08743F); --on-grad:#FFFFFF; --glow:rgba(8,116,63,.16);
  --grad-name:linear-gradient(100deg,#2EDB8A 0%,#35CFE0 50%,#2EDB8A 100%);
  --foot-bg:#0F0F0F; --foot-ink:#FFFFFF; --foot-muted:#B7B6B0; --foot-line:#2B2B29;
  --shadow-lg:0 40px 80px -44px rgba(15,15,15,.32),0 14px 30px -22px rgba(15,15,15,.16);
  --shadow-md:0 22px 44px -28px rgba(15,15,15,.28);
  --shadow-sm:0 6px 18px -12px rgba(15,15,15,.22);
  --nav-bg:rgba(255,254,250,.92);
  --warn:#7A4F04; --warn-soft:#FBF0D6;
  --display:"DM Sans","Avenir Next","Segoe UI",Helvetica,Arial,sans-serif;
  --sans:"DM Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gutter:clamp(18px,4vw,40px);
  --max:1180px;
  --section:clamp(80px,11vw,160px);
  --ease:cubic-bezier(.22,.68,.24,1);
  --ease-soft:cubic-bezier(.4,.1,.2,1);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:clamp(16px,2vw,22px);
}
/* Visiteurs qui demandent plus de contraste à leur système : textes secondaires, filets et vert encore plus marqués */
@media (prefers-contrast:more){
  :root{--ink-2:#1F1F1D;--muted:#3B3B38;--line:#8F8D86;--line-2:#5E5C56;--accent:#06522E;--vivid:#06522E;--grad:linear-gradient(#06522E,#06522E);--foot-muted:#E2E1DC}
}
/* Téléphone : moins de vide entre les sections, les pages sont plus courtes à parcourir */
@media (max-width:560px){:root{--section:64px}}
@view-transition{navigation:auto}

*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:96px;-webkit-text-size-adjust:100%}
/* Défilement doux seulement une fois la page chargée : à l'arrivée sur une ancre (services.html#securite), on y va directement */
html.is-ready{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);
  /* 1.125rem = 18 px avec le réglage par défaut, et le texte grandit si le visiteur a agrandi la police de son navigateur */
  font-family:var(--sans);font-size:1.125rem;line-height:1.65;font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
p{text-wrap:pretty}
::selection{background:var(--accent);color:var(--on-accent)}
/* Focus clavier bien visible : anneau sombre sur fond clair, anneau blanc dans le pied de page */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.foot :focus-visible{outline-color:#fff}
main:focus{outline:none}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Lien d'évitement : premier élément atteint au clavier, visible seulement quand il a le focus */
.skip{position:fixed;left:16px;top:calc(12px + env(safe-area-inset-top,0px));z-index:100;background:var(--ink);color:var(--bg);font-weight:500;font-size:1rem;padding:14px 20px;border-radius:10px;text-decoration:none;transform:translateY(-200%);opacity:0;transition:transform .3s var(--ease),opacity .2s}
.skip:focus{transform:none;opacity:1;outline:3px solid var(--accent);outline-offset:3px}

.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.section--tight{padding-block:calc(var(--section) * .55)}

/* ---------- Typographie ---------- */
/* Interlettrage un peu moins serré et interlignes un peu plus hauts qu'avant : les grands titres se lisent mieux */
.display{font-family:var(--display);font-weight:500;font-size:clamp(2.5rem,6.4vw,5.2rem);line-height:1.06;letter-spacing:-.034em;text-wrap:balance}
.h2{font-family:var(--display);font-weight:500;font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.14;letter-spacing:-.027em;text-wrap:balance}
.h3{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.25;letter-spacing:-.018em;text-wrap:balance}
.display em,.h2 em{font-style:normal;color:var(--accent)}
.label{font-size:.84rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.lead{font-size:clamp(1.16rem,1.4vw,1.3rem);line-height:1.6;color:var(--ink-2);max-width:58ch;text-wrap:pretty}
.muted{color:var(--muted)}
.tag{font-family:var(--mono);font-size:.84rem;color:var(--ink-2);padding:6px 10px;border:1px solid var(--line-2);border-radius:6px;white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;padding:7px 11px;border-radius:6px;background:var(--soft-2);color:var(--accent-strong);white-space:nowrap;line-height:1}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill--wip{background:var(--warn-soft);color:var(--warn)}
.pill--muted{background:transparent;border:1px solid var(--line-2);color:var(--muted)}

/* Texte qui se révèle au défilement : même avant d'être « allumé », il garde un contraste suffisant (60 % d'opacité, soit plus de 4,5:1) */
.reveal-text{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.3;letter-spacing:-.022em;max-width:26em;text-wrap:pretty}
.reveal-text .rw{opacity:var(--o,1);transition:opacity .25s linear}
.js .reveal-text .rw{--o:.6}

/* ---------- Boutons et liens ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;border-radius:10px;
  font-weight:500;font-size:1rem;line-height:1;text-decoration:none;white-space:nowrap;
  transition:transform .35s var(--ease),background-color .3s,color .3s,border-color .3s;
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translate(3px,-3px)}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--accent);color:var(--on-accent)}
.btn--primary:hover{background:var(--accent-strong)}
.btn--ghost{border:1px solid var(--line-2);color:var(--ink);background:transparent}
.btn--ghost:hover{border-color:var(--ink)}
.btn--light{background:#fff;color:#0F0F0F}
.btn--light:hover{background:#E9E8E3}
.link{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);font-weight:500;border-bottom:1.5px solid var(--ink);padding-bottom:3px;transition:color .3s,border-color .3s}
.link:hover{color:var(--accent);border-color:var(--accent)}
.link svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.link:hover svg{transform:translate(3px,-3px)}

/* ---------- Barre de progression ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:80;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- Apparitions ---------- */
[data-split],.fade-in{opacity:0;transform:translateY(14px);animation:fadeUp .85s var(--ease) forwards;animation-delay:var(--d,.12s)}
@keyframes fadeUp{to{opacity:1;transform:none}}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .95s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js .rv.is-in{opacity:1;transform:none}
main[hidden]{display:none}
main.is-leaving{opacity:0;transition:opacity .2s var(--ease-soft)}
main.is-entering{animation:pageIn .45s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}}

/* ---------- En-tête : le socle ----------
   Ce fichier pose la structure commune : le nom, trois rubriques (Services, Réalisations, Contact), la langue,
   le bouton de devis, le grand panneau « Services » et le menu du téléphone.
   L'allure de la barre vient d'un habillage, choisi sur la balise <html data-hdr="..."> : aujourd'hui « touches »
   (des touches de clavier), dont le style suit ce socle. */
:root{--nav-h:84px}
html{scroll-padding-top:calc(var(--nav-h) + 16px)}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--bg);transition:transform .55s var(--ease),background-color .35s,box-shadow .35s}
/* La barre se replie quand on descend dans la page et revient dès qu'on remonte */
.nav.is-hidden{transform:translateY(-102%)}
/* Si on arrive dans le menu au clavier alors qu'il est replié, il revient */
.nav.is-hidden:focus-within{transform:none}
.nav__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;height:var(--nav-h)}
.brand{display:flex;flex-direction:column;justify-content:center;gap:4px;justify-self:start;min-height:44px;text-decoration:none;line-height:1.1;min-width:0}
.brand__name{font-weight:600;font-size:1.2rem;letter-spacing:-.03em;white-space:nowrap;transition:color .3s}
.brand__role{font-size:.84rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.brand:hover .brand__name{color:var(--accent)}
.nav__main{position:relative;height:100%;display:flex;align-items:center}
.nav__links{display:flex;align-items:center;gap:4px;height:100%}
.nav__item{height:100%;display:flex;align-items:center}
.nav__link{display:inline-flex;align-items:center;gap:7px;font-size:1.02rem;font-weight:500;text-decoration:none;color:var(--ink-2);padding:13px 14px;border-radius:10px;transition:color .3s,background-color .3s;line-height:1}
.nav__link:hover,.nav__item:hover>.nav__link,.nav__item:focus-within>.nav__link{color:var(--ink)}
.nav__link[aria-current]{color:var(--ink);font-weight:600}
.nav__link .chev{width:10px;height:10px;transition:transform .4s var(--ease);opacity:.75}
.nav__item:hover .chev,.nav__item:focus-within .chev{transform:rotate(180deg)}
/* Le repère : un trait placé par le script sous le lien survolé ou sous la rubrique en cours. L'habillage « touches » ne s'en sert pas (la touche sombre suffit) */
.nav__ind{position:absolute;left:0;bottom:-1px;width:40px;height:3px;border-radius:3px 3px 0 0;background:var(--accent);opacity:0;pointer-events:none;transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s}
html:not(.js) .nav__link[aria-current]{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:8px}
@media (forced-colors:active){.nav__ind{background:Highlight}}

/* Sous-menu Services : un grand panneau clair sous la barre. Les cinq services à gauche ; à droite, un encart sombre « À voir aussi » (thèmes, méthode) */
.drop{--drop-x:-50%;position:absolute;left:50%;top:100%;padding-top:12px;width:min(780px,94vw);color:var(--ink);
  opacity:0;visibility:hidden;transform:translate(var(--drop-x),8px) scale(.985);transform-origin:50% 0;transition:opacity .28s var(--ease),transform .38s var(--ease),visibility 0s .38s}
.nav__item:hover>.drop,.nav__item:focus-within>.drop{opacity:1;visibility:visible;transform:translate(var(--drop-x),0) scale(1);transition:opacity .28s var(--ease),transform .38s var(--ease),visibility 0s}
.nav__item.is-shut>.drop{opacity:0;visibility:hidden;pointer-events:none;transform:translate(var(--drop-x),8px) scale(.985);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s}
.nav__item.is-shut .chev{transform:none}
.drop__in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:18px;box-shadow:var(--shadow-lg);padding:8px}
.drop__list{display:flex;flex-direction:column;gap:2px;min-width:0}
.drop__list a{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;padding:10px 14px 10px 10px;border-radius:12px;text-decoration:none;transition:background-color .3s}
.drop__list a:hover,.drop__list a:focus-visible{background:var(--card)}
.drop__ic{width:40px;height:40px;border-radius:10px;background:var(--card);color:var(--ink);display:grid;place-items:center;transition:background-color .3s,color .3s}
.drop__list a:hover .drop__ic{background:var(--ink);color:#2EDB8A}
.drop__ic svg{width:20px;height:20px}
.drop__list b{display:block;font-weight:600;font-size:1rem;letter-spacing:-.01em;line-height:1.25}
.drop__list small{display:block;font-size:.9rem;color:var(--muted);line-height:1.4;margin-top:2px}
.drop__aside{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-width:0;padding:16px;border-radius:12px;background:var(--ink);color:#FFFFFF}
.drop__aside :focus-visible{outline-color:#fff}
.drop__k{font-size:.84rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#B7B6B0;padding:6px 8px 8px}
.drop__also{display:grid;grid-template-columns:minmax(0,1fr) 14px;gap:12px;align-items:center;padding:12px 8px;border-top:1px solid #2B2B29;text-decoration:none;border-radius:8px;transition:background-color .3s}
.drop__also:hover,.drop__also:focus-visible{background:#1F1F1D}
.drop__also b{display:block;font-weight:500;font-size:1.08rem;letter-spacing:-.015em;line-height:1.25}
.drop__also small{display:block;font-size:.9rem;line-height:1.45;color:#CFCEC8;margin-top:3px}
.drop__also svg{width:14px;height:14px;color:#B7B6B0;transition:transform .4s var(--ease),color .3s}
.drop__also:hover svg{transform:translate(2px,-2px);color:#2EDB8A}
.drop__also[aria-current] b{color:#2EDB8A}
.drop__go{display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-top:auto;padding:13px 15px;border-radius:10px;background:#FFFFFF;color:#0F0F0F;font-size:.95rem;font-weight:500;text-decoration:none;transition:background-color .3s}
.drop__aside .drop__go{margin-top:12px}
.drop__go:hover{background:#E9E8E3}
.drop__go svg{width:13px;height:13px;transition:transform .4s var(--ease)}
.drop__go:hover svg{transform:translate(2px,-2px)}

.nav__tools{display:flex;align-items:center;gap:10px;flex:none;justify-self:end}
/* Choix de la langue : la langue active porte elle-même son fond sombre (lisible aussi en mode contrastes élevés) */
.lang{display:flex;gap:2px;border:1px solid var(--line-2);border-radius:10px;padding:3px;font-size:.88rem;font-weight:600;background:var(--surface)}
.lang button{min-width:42px;min-height:38px;padding:0 10px;border-radius:7px;color:var(--ink-2);transition:color .3s,background-color .35s var(--ease);line-height:1}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--ink);color:#FFFFFF}
@media (forced-colors:active){.lang button[aria-pressed="true"],.seg button[aria-pressed="true"]{outline:2px solid ButtonText;outline-offset:-2px}}
/* Le bouton de devis */
.nav__cta{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 18px;border-radius:10px;background:var(--accent);color:#FFFFFF;font-size:1rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .3s,transform .2s,box-shadow .2s}
.nav__cta:hover{background:var(--accent-strong)}
.nav__cta:active{transform:scale(.98)}
.nav__cta svg{width:14px;height:14px;flex:none;transition:transform .4s var(--ease)}
.nav__cta:hover svg{transform:translate(3px,-3px)}
.burger{display:none;width:46px;height:46px;border-radius:10px;border:1px solid var(--line-2);position:relative;background:var(--surface)}
/* Traits dessinés en bordure (et non en fond) : ils restent visibles en mode « contrastes élevés » de Windows */
.burger span{position:absolute;left:13px;right:13px;height:0;border-top:2px solid var(--ink);transition:transform .45s var(--ease),top .45s var(--ease),opacity .3s}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:26px}
.burger[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){top:22px;transform:rotate(-45deg)}

/* Menu sur téléphone : il s'ouvre sous la barre (le script lui donne sa position) et prend le reste de l'écran */
.menu{position:fixed;left:0;right:0;bottom:0;top:var(--menu-top,84px);z-index:55;background:var(--bg);color:var(--ink);padding:10px var(--gutter) calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:18px;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s .5s;overflow-y:auto}
.menu.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s}
.menu__list{display:flex;flex-direction:column}
.menu__list>li{border-bottom:1px solid var(--line-2)}
.menu__top{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 2px;font-size:1.5rem;font-weight:500;letter-spacing:-.03em;text-decoration:none;text-align:left;color:var(--ink)}
.menu__top .chev{width:14px;height:14px;transition:transform .4s var(--ease);opacity:.7}
.menu__top[aria-expanded="true"] .chev{transform:rotate(180deg)}
.menu__sub{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--ease),visibility 0s .45s}
.menu__sub>ul{overflow:hidden;display:flex;flex-direction:column;gap:2px}
.menu__top[aria-expanded="true"]+.menu__sub{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s var(--ease),visibility 0s}
.menu__sub a{display:block;padding:9px 2px 9px 16px;text-decoration:none;color:var(--ink-2);font-size:1.08rem;line-height:1.35;border-left:2px solid var(--line-2)}
.menu__sub li:last-child a{margin-bottom:14px}
/* Thèmes et méthode, rangés sous Services : séparés des cinq services par un espace, repérés par un filet vert */
.menu__sub .menu__also:nth-last-child(2) a{margin-top:10px}
.menu__sub .menu__also a{border-left-color:var(--accent);color:var(--ink)}
.menu__foot{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.menu__foot .nav__cta{width:100%;justify-content:center;min-height:58px;font-size:1.05rem}
.menu__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu__quiet{display:inline-flex;align-items:center;gap:8px;padding:12px 2px;font-size:1.05rem;font-weight:500;color:var(--ink);text-decoration:none}
.menu__quiet svg{width:13px;height:13px}
/* La langue se range dans le menu quand la barre n'a plus la place de la montrer */
.menu .lang{display:none}
/* Entre 1000 et 1180 px, la barre se resserre : les liens se centrent dans la place qui reste, entre le nom et les outils */
@media (max-width:1180px){.nav__in{grid-template-columns:auto minmax(0,1fr) auto;gap:12px}.nav__main{justify-self:center}.nav__link{padding-inline:12px}.nav__cta{padding-inline:15px}}
/* Sous 1000 px, on passe au bouton de menu */
@media (max-width:1000px){
  :root{--nav-h:72px}
  .nav__main,.nav__tools .nav__cta{display:none}.burger{display:block}
  html:not(.js) .burger{display:none} /* sans script le bouton ne peut rien ouvrir : les liens restent disponibles dans le pied de page */
  .nav__in{grid-template-columns:minmax(0,1fr) auto}
}
@media (min-width:1001px){.menu{display:none}}
@media (max-width:520px){
  :root{--nav-h:66px}
  .nav__in{gap:8px}
  .brand__name{font-size:1.1rem}
  .nav .brand__role{display:none}
  .nav__tools{gap:8px}
}
/* Très petits téléphones : le nom, la langue et le bouton de menu tiennent sur une ligne sans se toucher */
@media (max-width:360px){
  .nav__in{gap:6px}
  .brand__name{font-size:1rem}
  .nav__tools{gap:6px}
  .lang button{min-width:36px;padding:0 7px}
  .burger{width:44px;height:44px}
  .burger span{left:12px;right:12px}
  .burger span:nth-child(1){top:17px}.burger span:nth-child(2){top:25px}
  .burger[aria-expanded="true"] span:nth-child(1),.burger[aria-expanded="true"] span:nth-child(2){top:21px}
}

/* ---------- En-tête « Touches » ----------
   Les rubriques, la langue et le devis sont des touches de clavier : elles ont du relief et s'enfoncent
   sous le pointeur ou le doigt. La page en cours est la touche sombre, restée enfoncée. */
[data-hdr="touches"]{--nav-h:92px;--key-edge:#BDBBB1}

/* La barre et ses touches */
[data-hdr="touches"] .nav.is-scrolled{background:rgba(255,254,250,.94);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 1px 0 var(--line)}
[data-hdr="touches"] .nav__links{gap:10px}
[data-hdr="touches"] .nav__link,[data-hdr="touches"] .nav .lang button,[data-hdr="touches"] .burger{
  background:#FFFFFF;border:1px solid var(--key-edge);border-radius:10px;box-shadow:0 4px 0 0 var(--key-edge);color:var(--ink);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease),background-color .25s,color .25s}
/* Toutes les touches ont la même hauteur (44 px) : elles forment une rangée nette, comme sur un clavier */
[data-hdr="touches"] .nav__link{min-height:44px;padding:0 16px;font-size:1rem;margin-bottom:4px}
[data-hdr="touches"] .nav__link:hover,[data-hdr="touches"] .nav__item:hover>.nav__link,[data-hdr="touches"] .nav__item:focus-within>.nav__link,[data-hdr="touches"] .nav .lang button:hover,[data-hdr="touches"] .burger:hover{transform:translateY(2px);box-shadow:0 2px 0 0 var(--key-edge)}
[data-hdr="touches"] .nav__link:active,[data-hdr="touches"] .nav .lang button:active,[data-hdr="touches"] .burger:active{transform:translateY(4px);box-shadow:0 0 0 0 var(--key-edge)}
/* La page en cours : touche sombre, enfoncée, avec son voyant vert */
[data-hdr="touches"] .nav__link[aria-current],[data-hdr="touches"] .nav .lang button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#FFFFFF;transform:translateY(3px);box-shadow:0 1px 0 0 #000000}
[data-hdr="touches"] .nav__link[aria-current]::before{content:"";width:7px;height:7px;border-radius:50%;background:#2EDB8A;flex:none}
[data-hdr="touches"] .nav__ind{display:none}
[data-hdr="touches"] .drop{padding-top:8px}
[data-hdr="touches"] .nav .lang{border:0;padding:0;gap:6px;background:transparent}
[data-hdr="touches"] .nav .lang button{min-width:46px;min-height:44px;margin-bottom:4px;border-radius:10px}
[data-hdr="touches"] .nav .nav__cta{min-height:44px;margin-bottom:4px;border-radius:10px;border:1px solid var(--accent-strong);box-shadow:0 4px 0 0 var(--accent-strong);transition:transform .12s var(--ease),box-shadow .12s var(--ease),background-color .25s}
[data-hdr="touches"] .nav .nav__cta:hover{background:var(--accent);transform:translateY(2px);box-shadow:0 2px 0 0 var(--accent-strong)}
[data-hdr="touches"] .nav .nav__cta:active{transform:translateY(4px);box-shadow:0 0 0 0 var(--accent-strong)}
[data-hdr="touches"] .burger{width:48px;height:44px;margin-bottom:4px}
[data-hdr="touches"] .burger span{left:14px;right:14px}
[data-hdr="touches"] .burger span:nth-child(1){top:16px}[data-hdr="touches"] .burger span:nth-child(2){top:24px}
[data-hdr="touches"] .burger[aria-expanded="true"] span:nth-child(1),[data-hdr="touches"] .burger[aria-expanded="true"] span:nth-child(2){top:20px}
[data-hdr="touches"] .burger[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);transform:translateY(3px);box-shadow:0 1px 0 0 #000000}
[data-hdr="touches"] .burger[aria-expanded="true"] span{border-top-color:#FFFFFF}
[data-hdr="touches"] .menu .nav__cta{border:1px solid var(--accent-strong);box-shadow:0 4px 0 0 var(--accent-strong);margin-bottom:6px}
@media (max-width:1180px){[data-hdr="touches"] .nav__links{gap:7px}[data-hdr="touches"] .nav__link{padding-inline:13px}}
@media (max-width:1000px){[data-hdr="touches"]{--nav-h:78px}}
@media (max-width:520px){
  [data-hdr="touches"]{--nav-h:70px}
  [data-hdr="touches"] .nav .lang{gap:5px}
  [data-hdr="touches"] .nav .lang button{min-width:42px;padding:0 8px}
}
@media (max-width:360px){[data-hdr="touches"] .nav .lang button{min-width:38px;padding:0 6px}[data-hdr="touches"] .burger{width:44px}[data-hdr="touches"] .burger span{left:12px;right:12px}}
@media (prefers-reduced-motion:reduce){[data-hdr="touches"] .nav__link,[data-hdr="touches"] .nav .lang button,[data-hdr="touches"] .burger,[data-hdr="touches"] .nav .nav__cta{transition:none}}

/* ---------- Pied de page sombre et nom géant ---------- */
.foot{position:relative;overflow:hidden;background:var(--foot-bg);color:var(--foot-ink);margin-top:var(--section);padding-top:clamp(56px,7vw,104px);transition:background-color .5s}
.foot__cta{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px 40px;padding-bottom:clamp(40px,5vw,72px);border-bottom:1px solid var(--foot-line)}
.foot__cta .h2{max-width:22em}
.foot__cta .h2 em{background:var(--grad-name);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.foot__top{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px;padding-block:clamp(36px,4vw,56px)}
.foot .brand{color:var(--foot-ink)}
.foot__top p{color:var(--foot-muted);font-size:1rem;max-width:38ch;margin-top:14px;line-height:1.6}
.foot__top h3{font-size:1.05rem;font-weight:500;margin-bottom:10px;color:var(--foot-ink)}
.foot__top ul{display:flex;flex-direction:column;gap:0;font-size:1rem}
.foot__top ul a,.foot__top ul button{text-decoration:none;color:var(--foot-muted);transition:color .3s,transform .4s var(--ease);text-align:left;display:inline-block;padding-block:7px;line-height:1.35}
.foot__top ul a:hover,.foot__top ul button:hover{color:var(--foot-ink);transform:translateX(4px)}
.foot__bot{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;align-items:center;border-top:1px solid var(--foot-line);padding-block:20px;font-size:.95rem;color:var(--foot-muted)}
.totop{display:inline-flex;align-items:center;gap:8px;color:var(--foot-ink);text-decoration:none;font-weight:500;padding-block:10px}
.totop svg{width:14px;height:14px;transition:transform .5s var(--ease)}
.totop:hover svg{transform:translateY(-4px)}
.bigname{overflow:hidden;padding-inline:var(--gutter);margin-top:clamp(8px,2vw,24px);line-height:0}
.bigname__t{display:block;width:max-content;max-width:none;margin-inline:auto;white-space:nowrap;
  font-family:var(--display);font-weight:500;letter-spacing:-.06em;line-height:1.16;font-size:12.6vw;
  background:var(--grad-name);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.30) 100%);mask-image:linear-gradient(180deg,#000 42%,rgba(0,0,0,.30) 100%);
  user-select:none;padding-bottom:.08em;
  transform:translateY(var(--rise,0%));transition:transform 1.4s var(--ease)}
.js .bigname:not(.is-in) .bigname__t{--rise:64%}
.bigname.is-in .bigname__t{animation:sheen 4.8s var(--ease-soft) .4s 1 both}
@keyframes sheen{to{background-position:100% 0}}
@media (max-width:860px){.foot__top{grid-template-columns:1fr 1fr}.foot__top>div:first-child{grid-column:1/-1}}

/* ---------- Mentions légales ---------- */
dialog.legal{border:1px solid var(--line-2);border-radius:var(--r-lg);padding:0;width:min(680px,calc(100% - 32px));max-height:min(86vh,760px);background:var(--surface);color:var(--ink);box-shadow:var(--shadow-lg)}
dialog.legal::backdrop{background:rgba(10,10,10,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
dialog.legal[open]{animation:dlg .5s var(--ease)}
@keyframes dlg{from{opacity:0;transform:translateY(18px) scale(.98)}}
.legal__in{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;gap:16px}
.legal__in h3{font-weight:500;font-size:1.8rem;letter-spacing:-.03em}
.legal__in h4{font-size:1rem;font-weight:600;margin-top:6px}
.legal__in p{font-size:1rem;color:var(--ink-2);line-height:1.65}
.legal__close{align-self:flex-end;margin-top:6px}
.todo{background:var(--warn-soft);color:var(--warn);padding:1px 7px;border-radius:6px;font-family:var(--mono);font-size:.8em;white-space:nowrap}

/* ---------- En-têtes de page et de section ---------- */
.page-head{padding-block:clamp(40px,6vw,92px) clamp(36px,4.4vw,64px);display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.page-head .display{font-size:clamp(2.3rem,5.4vw,4.4rem);max-width:16em}
.page-head__tx{display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0;max-width:100%}
/* En-tête avec une maquette 3D à droite (Méthode, À propos, Contact) : même composition que l'accueil, en plus petit */
.page-head--stage{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px clamp(24px,5vw,80px);align-items:center;padding-block:clamp(32px,4.4vw,64px) clamp(32px,4vw,56px)}
.page-head--stage .display{font-size:clamp(2.3rem,4.6vw,3.9rem)}
.page-head--stage .scene3d{justify-self:end}
@media (max-width:900px){
  .page-head--stage{grid-template-columns:1fr;align-items:start}
  .page-head--stage .scene3d{justify-self:center;max-width:430px}
}
/* Sommaire « Sur cette page » : une rangée de pastilles sous le texte d'introduction. Sur téléphone, elle défile du doigt. */
.toc{width:100%;min-width:0}
.toc ul{display:flex;flex-wrap:wrap;gap:8px}
.toc a{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:99px;background:var(--surface);text-decoration:none;font-size:1rem;font-weight:500;line-height:1.2;color:var(--ink);white-space:nowrap;transition:border-color .3s,background-color .3s,color .3s}
.toc a:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.toc svg{width:13px;height:13px;flex:none;transform:rotate(180deg);color:var(--muted);transition:transform .4s var(--ease),color .3s}
.toc a:hover svg{transform:rotate(180deg) translateY(-2px);color:currentColor}
@media (max-width:760px){
  .toc{width:auto;max-width:none;align-self:stretch;margin-inline:calc(-1 * var(--gutter))}
  .toc ul{flex-wrap:nowrap;overflow-x:auto;padding:4px var(--gutter);scroll-padding-inline:var(--gutter);scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .toc ul::-webkit-scrollbar{display:none}
  .toc li{flex:none;scroll-snap-align:start}
}

/* ---------- Maquettes 3D ----------
   Un canvas par maquette ; le script (scene3d.js) y dessine le plateau, les objets en points, les câbles et leurs paquets verts.
   Sur l'accueil, les cinq étiquettes sont de vrais liens posés par-dessus le canvas et déplacés par le script. */
.scene3d{width:100%;max-width:660px}
.scene3d__stage{position:relative;width:100%;aspect-ratio:1/.9}
.scene3d--sm{max-width:540px}
.scene3d--sm .scene3d__stage{aspect-ratio:1/.8}
.scene3d__stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.scene3d__stage canvas:active{cursor:grabbing}
/* Les étiquettes. Sans script : une simple rangée de liens. Avec : chacune suit son objet. */
.scene3d__tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.scene3d__tags a{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:99px;background:#FFFFFF;border:1px solid var(--line-2);color:var(--ink);font-size:.84rem;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap;transition:background-color .25s,color .25s,border-color .25s}
.scene3d__tags a:hover,.scene3d__tags a:focus-visible{background:var(--ink);border-color:var(--ink);color:#FFFFFF}
.is-3d .scene3d__tags{position:absolute;inset:0;display:block;pointer-events:none;opacity:0;transition:opacity .5s var(--ease)}
.is-3d .scene3d__tags.is-placed{opacity:1}
.is-3d .scene3d__tags a{position:absolute;left:0;top:0;pointer-events:auto;will-change:transform}
html:not(.js) .scene3d__stage{aspect-ratio:auto}
html:not(.js) .scene3d__stage canvas{display:none}
@media (forced-colors:active){.scene3d__tags a{border:2px solid ButtonText}}
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:clamp(32px,4vw,56px)}
/* Colonne de libellé à gauche, contenu à droite */
.sec{display:grid;grid-template-columns:minmax(0,2.6fr) minmax(0,9.4fr);gap:20px clamp(24px,4vw,64px);align-items:start}
.sec__label{padding-top:.5em;border-top:1px solid var(--ink);display:block}
.sec__body{min-width:0}
@media (max-width:860px){.sec{grid-template-columns:1fr}.sec__label{border-top:0;padding-top:0}}

/* ---------- Accueil ---------- */
.hero{padding-block:clamp(56px,9vw,136px) clamp(40px,6vw,80px)}
.hero__in{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(24px,3vw,36px)}
.hero__in .display{max-width:15em}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px}
@media (max-width:560px){.hero__actions .btn{flex:1 1 auto}}

/* Cadre gris clair qui accueille la galerie de captures du thème */
.frame{background:var(--card);border-radius:var(--r-xl);padding:clamp(14px,4vw,56px) clamp(14px,4vw,56px) 0;overflow:hidden;transition:background-color .5s}
.frame--full{padding-bottom:clamp(14px,4vw,56px)}
.caption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 32px;margin-top:18px;font-size:1rem;color:var(--muted)}
.caption p{max-width:64ch}

/* ---------- Listes en lignes (services, index des réalisations) ---------- */
.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr) 24px;gap:8px clamp(20px,3vw,48px);align-items:baseline;padding-block:clamp(20px,2.4vw,30px);border-bottom:1px solid var(--line);text-decoration:none;transition:padding .45s var(--ease),color .3s}
.row__t{font-weight:500;font-size:clamp(1.25rem,1.9vw,1.6rem);letter-spacing:-.025em;line-height:1.2;text-wrap:balance} /* balance : un titre sur deux lignes ne laisse pas un mot seul à la fin */
.row__d{color:var(--ink-2);font-size:1.02rem;line-height:1.55}
.row svg{width:18px;height:18px;align-self:center;color:var(--muted);transition:transform .45s var(--ease),color .3s}
a.row:hover{padding-inline:clamp(8px,1.2vw,16px)}
a.row:hover .row__t{color:var(--accent)}
a.row:hover svg{transform:translate(3px,-3px);color:var(--accent)}
.row--index{grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,2.4fr) 24px}
.row--index .row__m{justify-self:start}
@media (max-width:760px){
  .row,.row--index{grid-template-columns:minmax(0,1fr) 24px}
  .row__d,.row--index .row__m{grid-column:1}
  .row svg{grid-column:2;grid-row:1}
}

/* ---------- Cartes ---------- */
.card{background:var(--card);border-radius:var(--r-lg);overflow:hidden;transition:background-color .4s}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
@media (max-width:1020px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}
@media (max-width:560px){.grid-4{grid-template-columns:1fr}}
.svc__for{font-size:.84rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);line-height:1.45}
.checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px;font-size:1.02rem;color:var(--ink-2);width:100%}
.checks li{position:relative;padding-left:26px;line-height:1.5}
.checks li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.checks--one{grid-template-columns:1fr}
@media (max-width:640px){.checks{grid-template-columns:1fr}}

/* Schéma de réseau : un routeur, deux réseaux séparés */
.ill-net{--n-bg:var(--surface);--n-line:var(--line);--n-ink:var(--ink);--n-ink2:var(--ink-2);--n-code:var(--accent);--n-root-bg:var(--ink);--n-root-ink:var(--bg);--n-wire:var(--muted);
  width:min(100%,460px);display:flex;flex-direction:column;align-items:center;font-size:.92rem}
.net-root{position:relative;display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:10px;background:var(--n-root-bg);color:var(--n-root-ink);font-weight:500;line-height:1.2;transition:background-color .5s,color .5s}
.net-root svg{width:17px;height:17px;flex:none}
.net-root::after{content:"";position:absolute;left:calc(50% - .75px);top:100%;width:1.5px;height:18px;background:var(--n-wire)}
.net-branches{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin-top:36px}
.net-branches::before{content:"";position:absolute;left:25%;right:25%;top:-18px;height:18px;border:1.5px solid var(--n-wire);border-bottom:0;border-radius:8px 8px 0 0}
.net-branch{background:var(--n-bg);border:1px solid var(--n-line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:5px;text-align:left;transition:background-color .5s,border-color .5s}
.net-branch b{font-weight:500;color:var(--n-ink);line-height:1.25}
.net-branch code{font-family:var(--mono);font-size:.78rem;color:var(--n-code)}
.net-branch ul{display:flex;flex-direction:column;gap:4px;margin-top:6px;color:var(--n-ink2);font-size:.86rem;line-height:1.4}
.net-branch li{position:relative;padding-left:12px}
.net-branch li::before{content:"";position:absolute;left:1px;top:.55em;width:4px;height:4px;border-radius:50%;background:var(--n-wire)}
@media (max-width:420px){.net-branch{padding:11px}.net-branch code{font-size:.7rem}}

/* Bloc en deux colonnes (page Contact : « ce qui m'aide à vous répondre vite ») */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.split__tx{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.split__tx>p{color:var(--ink-2)}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- Page Services : une liste dépliante ----------
   Les cinq services se lisent d'un coup d'œil (numéro, nom, une phrase). Un seul est ouvert à la fois : son détail et sa maquette 3D.
   Sans script, tout est ouvert. */
.svcs{border-top:1px solid var(--ink)}
.svc{border-bottom:1px solid var(--line-2);scroll-margin-top:96px}
.svc__h{font:inherit;letter-spacing:inherit}
.svc__q{display:grid;grid-template-columns:56px minmax(0,1fr) 28px;gap:clamp(12px,2vw,28px);align-items:center;width:100%;padding:clamp(20px,2.4vw,30px) 2px;text-align:left;transition:color .3s}
.svc__n{font-family:var(--mono);font-size:.95rem;color:var(--muted);transition:color .3s}
.svc__tt{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4px clamp(16px,3vw,48px);align-items:baseline}
.svc__t{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,2.5vw,2.05rem);letter-spacing:-.028em;line-height:1.15;transition:color .3s}
.svc__s{color:var(--ink-2);font-size:1.04rem;line-height:1.45}
.svc__q:hover .svc__t,.svc__q[aria-expanded="true"] .svc__t{color:var(--accent)}
.svc__q[aria-expanded="true"] .svc__n{color:var(--accent)}
.svc__q i{position:relative;width:22px;height:22px;justify-self:end}
.svc__q i::before,.svc__q i::after{content:"";position:absolute;left:0;right:0;top:10px;height:0;border-top:2px solid currentColor;transition:transform .45s var(--ease)}
.svc__q i::after{transform:rotate(90deg)}
.svc__q i{transition:transform .45s var(--ease)}
.svc__q[aria-expanded="true"] i{transform:rotate(45deg)}
.js .svc__a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .5s var(--ease),visibility 0s .5s}
.js .svc__a>div{overflow:hidden}
.js .svc.is-open>.svc__a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .5s var(--ease),visibility 0s}
.svc__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(20px,4vw,64px);align-items:center;padding:4px 2px clamp(28px,4vw,52px) calc(56px + clamp(12px,2vw,28px))}
.svc__tx{display:flex;flex-direction:column;gap:18px;align-items:flex-start;min-width:0}
.svc__tx>p{color:var(--ink-2)}
.svc__stage{display:grid;place-items:center;min-width:0}
.svc__stage .scene3d{max-width:460px}
.svcs__more{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:clamp(28px,4vw,44px)}
html:not(.js) .svc__q i{display:none}
@media (max-width:900px){
  .svc__tt{grid-template-columns:1fr}
  .svc__in{grid-template-columns:1fr;gap:12px;padding-left:2px}
  .svc__stage{order:-1}
  .svc__stage .scene3d{max-width:340px}
}
@media (max-width:560px){
  .svc__q{grid-template-columns:34px minmax(0,1fr) 22px;gap:10px;padding-block:18px}
  .svc__n{font-size:.88rem}
  .svc__s{font-size:1rem}
}

/* ---------- Vraies captures d'écran : un cadre de navigateur sobre, et un téléphone ---------- */
.bframe{margin:0;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:#FFFFFF;box-shadow:var(--shadow-md)}
.bframe__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:9px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.bframe__dots{display:flex;gap:6px}
.bframe__dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.bframe__url{font-family:var(--mono);font-size:.84rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:99px;padding:4px 16px;line-height:1.3}
.bframe__view{position:relative;aspect-ratio:1640/1025;background:#EEF2F6}
.bframe__view img{display:block;width:100%;height:auto}
.js .bframe__view img[hidden]{display:none}
.pframe{margin:0;border:5px solid var(--ink);border-radius:22px;overflow:hidden;background:var(--ink);box-shadow:var(--shadow-md)}
.pframe img{display:block;width:100%;height:auto;border-radius:16px}
/* La galerie de la page Thèmes : le grand cadre, et le téléphone qui le chevauche en bas à droite */
.shots__stage{position:relative;max-width:960px;margin-inline:auto;padding:0 clamp(28px,7vw,84px) clamp(20px,3vw,36px) 0}
.shots__stage .pframe{position:absolute;right:0;bottom:0;width:clamp(96px,19%,178px)}
.seg--4{flex-wrap:wrap}
@media (max-width:640px){
  .seg.seg--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .shots__stage{padding:0 22px 18px 0}
  .shots__stage .pframe{width:26%;border-width:3px;border-radius:14px}
  .shots__stage .pframe img{border-radius:10px}
  .bframe__url{font-size:.84rem;padding:3px 10px}
}
/* Quatre libellés sur une ligne ne tiennent pas sur un petit téléphone (« Adhésion », « Membership ») : deux lignes de deux */
@media (max-width:480px){.seg.seg--4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Bandeau sombre : il casse le rythme d'une page claire (ce que vous recevez, parcours) ---------- */
.band{background:var(--ink);color:#FFFFFF;border-radius:var(--r-xl);padding:clamp(28px,5vw,72px)}
.band :focus-visible{outline-color:#fff}
.band .label{color:var(--foot-muted)}
.band .h2 em{color:#2EDB8A}
.band__head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,52px)}
.band__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px clamp(20px,2.6vw,36px)}
.band__grid li{display:flex;flex-direction:column;gap:8px;padding-top:18px;border-top:1px solid #3B3B38}
.band__n{font-family:var(--mono);font-size:.84rem;color:#2EDB8A}
.band__ic{width:26px;height:26px;color:#2EDB8A;margin-bottom:4px}
.band__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(28px,4vw,52px);padding-top:clamp(22px,3vw,32px);border-top:1px solid #3B3B38}
.band__foot p{color:#CFCEC8;font-size:1rem;line-height:1.6;max-width:62ch}
.band__grid b{font-weight:500;font-size:1.18rem;letter-spacing:-.02em;line-height:1.25}
.band__grid p{color:#CFCEC8;font-size:1rem;line-height:1.55}
@media (max-width:1020px){.band__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .band{margin-inline:calc(-1 * var(--gutter));border-radius:0;padding:44px var(--gutter)}
  .band__grid{grid-template-columns:1fr;gap:0}
  .band__grid li{padding-block:18px}
  /* Avec une icône : elle passe à gauche du texte, la liste est plus compacte */
  .band__grid--ic li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:4px 14px;align-items:start}
  .band__grid--ic .band__ic{grid-row:1 / span 2;margin:2px 0 0}
  .band__grid--ic li>b,.band__grid--ic li>p{grid-column:2}
  .band__foot .btn{width:100%}
}

/* ---------- Thème : démo et fonctions ---------- */
.show__head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:20px}
.theme__controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-bottom:22px}
.show__head,.theme__controls{max-width:960px;width:100%;margin-left:auto;margin-right:auto}
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);max-width:100%;transition:background-color .5s,border-color .5s}
.seg button{min-height:42px;padding:9px 16px;border-radius:7px;font-size:.98rem;font-weight:500;color:var(--ink-2);transition:background-color .35s var(--ease),color .3s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.more{padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.more p{color:var(--ink-2);font-size:1.02rem}
@media (max-width:640px){.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.seg button{padding:8px 4px;font-size:.84rem;min-height:48px;line-height:1.2;display:grid;place-items:center}}

/* ---------- Questions fréquentes ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__h{font:inherit;letter-spacing:inherit}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;padding:22px 2px;text-align:left;font-size:clamp(1.1rem,1.5vw,1.25rem);font-weight:500;letter-spacing:-.015em;line-height:1.35;transition:color .3s}
.faq__q:hover{color:var(--accent)}
.faq__q i{position:relative;width:18px;height:18px;flex:none}
.faq__q i::before,.faq__q i::after{content:"";position:absolute;left:0;right:0;top:8px;height:0;border-top:2px solid currentColor;transition:transform .45s var(--ease)}
.faq__q i::after{transform:rotate(90deg)}
.faq__q i{transition:transform .45s var(--ease)}
.faq__q[aria-expanded="true"] i{transform:rotate(45deg)}
.faq__a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s var(--ease),visibility 0s .45s}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 40px 24px 2px;color:var(--ink-2);max-width:68ch}
.faq__item.is-open>.faq__a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s var(--ease),visibility 0s}

/* ---------- Logos des clients : le rendu du bandeau des membres de cci-fl.org, aux couleurs de ce site ----------
   Libellé centré en capitales espacées, cartes blanches à coins de 12 px, piste qui glisse lentement, bords qui s'estompent
   par paliers (26 % de chaque côté sur grand écran), carte qui se soulève au survol. Pas de bouton : arrêt au survol, au focus,
   et pause au toucher ou à la barre d'espace. */
.logos{padding-block:calc(var(--section) * .55) calc(var(--section) * .3)}
.section + .logos{padding-top:0} /* après une section qui a déjà son espace en bas (accueil) */
.logos + .reviews{padding-top:calc(var(--section) * .3)}
.logos__k{margin:0 0 22px;font-size:.84rem;font-weight:600;line-height:1.3;text-transform:uppercase;letter-spacing:.14em;color:var(--accent);text-align:center}
.logos__row{position:relative;overflow:hidden;padding:6px 0 16px;--fade:26%;border-radius:12px}
.logos__row:focus-visible{outline-offset:4px}
.js .logos__row:not(.is-static){-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.12) 6%,rgba(0,0,0,.45) 13%,rgba(0,0,0,.85) 20%,#000 var(--fade),#000 calc(100% - var(--fade)),rgba(0,0,0,.85) 80%,rgba(0,0,0,.45) 87%,rgba(0,0,0,.12) 94%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.12) 6%,rgba(0,0,0,.45) 13%,rgba(0,0,0,.85) 20%,#000 var(--fade),#000 calc(100% - var(--fade)),rgba(0,0,0,.85) 80%,rgba(0,0,0,.45) 87%,rgba(0,0,0,.12) 94%,rgba(0,0,0,0) 100%)}
.logos__track{display:flex;gap:16px;width:max-content;margin-inline:auto;will-change:transform}
.logos__f{flex:none;display:flex;align-items:center;justify-content:center;height:118px;padding:0 40px;background:#FFFFFF;border:1px solid var(--line);border-radius:12px;transition:border-color .22s,transform .22s cubic-bezier(.22,.68,.28,1),box-shadow .22s}
.logos__f img{display:block;height:var(--h,48px);width:auto;max-width:none}
@media (hover:hover) and (pointer:fine){.logos__f:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 12px 26px -14px rgba(15,15,15,.3)}}
.logos__row.is-static .logos__track{width:auto;flex-wrap:wrap;justify-content:center}
@media (max-width:1100px){.logos__row{--fade:20%}}
@media (max-width:760px){
  .logos__row{--fade:14%}
  .logos__f{height:94px;padding:0 26px}
  .logos__f img{height:calc(var(--h,48px) * .78)}
}
@media (max-width:480px){.logos__row{--fade:10%}}
@media (prefers-reduced-motion:reduce){.logos__f{transition:none}}

/* ---------- Avis clients : de vrais avis, saisis dans data.js. Bloc masqué tant qu'il n'y en a pas. ---------- */
.reviews__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(14px,1.8vw,22px)}
.review{margin:0;display:flex;flex-direction:column;gap:18px;padding:clamp(22px,2.6vw,34px);border-radius:var(--r-lg);background:var(--card)}
.review blockquote{quotes:"«\00a0" "\00a0»";margin:0;font-weight:500;font-size:clamp(1.08rem,1.5vw,1.28rem);line-height:1.5;letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.review blockquote:lang(en){quotes:"“" "”"}
.review blockquote::before{content:open-quote;color:var(--accent)}
.review blockquote::after{content:close-quote;color:var(--accent)}
.review figcaption{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:2px}
.review__name{font-weight:600;color:var(--ink)}
.review__role{color:var(--muted);font-size:.96rem;line-height:1.4}
.review__role a{color:inherit;text-underline-offset:4px}
.review__role a:hover{color:var(--accent)}
.review--tpl{background:transparent;border:1.5px dashed var(--line-2);max-width:560px}
.review--tpl blockquote::before,.review--tpl blockquote::after{content:none}
.review--tpl blockquote,.review--tpl .review__name{color:var(--muted);font-weight:500}
.review__tag{align-self:flex-start;font-family:var(--mono);font-size:.84rem;color:var(--muted);padding:5px 10px;border:1px solid var(--line-2);border-radius:6px}
.reviews__more{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:clamp(20px,2.6vw,32px);color:var(--ink-2)}
.reviews__more .link svg{width:14px;height:14px}


/* ==========================================================
   Page d'accueil (v10) : courte.
   Hero en deux colonnes (le texte à gauche, la maquette 3D à droite, ses cinq étiquettes mènent aux services),
   puis le thème CCI Internationale dans un bandeau sombre compact, les réalisations illustrées, la façon de travailler.
   ========================================================== */

/* ---------- Hero ---------- */
.hero--split{padding-block:clamp(28px,4vw,56px) clamp(36px,5vw,72px);overflow-x:clip}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(24px,4vw,64px);align-items:center}
.hero--split .hero__in .display{font-size:clamp(2.5rem,5vw,4.3rem);max-width:none}
.hero--split .lead{max-width:52ch}
.hero--split .scene3d{justify-self:end}
.btn--lg{padding:19px 28px;font-size:1.06rem;border-radius:12px}
.btn--ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
@media (max-width:980px){
  .hero__grid{grid-template-columns:1fr}
  .hero--split .hero__in .display{font-size:clamp(2.5rem,7.4vw,4.3rem)}
  .hero--split .scene3d{max-width:520px;justify-self:center}
}
/* Téléphone : les deux boutons côte à côte, pour que la maquette arrive plus vite sous le pouce */
@media (max-width:560px){
  .hero--split{padding-top:22px}
  .hero--split .hero__in{gap:20px}
  .hero--split .hero__actions{gap:10px;width:100%}
  .hero--split .hero__actions .btn{flex:1 1 auto;padding:17px 12px;font-size:1rem}
  .hero--split .hero__actions .btn svg{display:none}
}

/* ---------- Le thème CCI Internationale : un bandeau sombre compact, juste sous le haut de page ---------- */
.home-theme{padding-top:clamp(4px,1.6vw,20px)}
.band--split{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:24px clamp(24px,4vw,64px);align-items:center;padding-block:clamp(28px,3.6vw,52px)}
.band__tx{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.band__tx .label{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0}
.band__tx .h2{font-size:clamp(1.7rem,3vw,2.5rem)}
.band__lead{color:#CFCEC8;font-size:1.06rem;line-height:1.6;max-width:54ch}
.pill--onDark{background:rgba(46,219,138,.16);color:#2EDB8A}
.band__ticks{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:10px 32px;font-size:1.02rem;color:#FFFFFF}
.band__ticks li{position:relative;padding-left:24px;line-height:1.4}
.band__ticks li::before{content:"";position:absolute;left:2px;top:.42em;width:11px;height:6px;border-left:2px solid #2EDB8A;border-bottom:2px solid #2EDB8A;transform:rotate(-45deg)}
.band__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:6px}
.band__link{display:inline-flex;align-items:center;gap:8px;color:#FFFFFF;font-weight:500;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.5);padding-bottom:3px;transition:border-color .3s}
.band__link:hover{border-color:#FFFFFF}
.band__link svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.band__link:hover svg{transform:translate(3px,-3px)}
.band--split .scene3d{justify-self:end;max-width:500px}
@media (max-width:900px){
  .band--split{grid-template-columns:1fr}
  .band--split .scene3d{justify-self:center;max-width:400px;order:-1}
}
@media (max-width:640px){
  .band__ticks{grid-template-columns:1fr;gap:8px}
  .band__acts .btn{width:100%}
}

/* ---------- « Ma façon de travailler » ---------- */
.home-why{padding-bottom:0}
.home-why__links{display:flex;flex-wrap:wrap;gap:14px 36px;margin-top:clamp(24px,3vw,36px)}

/* ---------- Réalisations : une vignette par ligne ---------- */
.rows--thumbs .row--index{grid-template-columns:132px minmax(0,1fr) 190px 24px;grid-template-rows:auto auto;align-items:center;gap:4px clamp(20px,3vw,40px)}
.rows--thumbs .thumb{grid-column:1;grid-row:1 / span 2}
.rows--thumbs .row__t{grid-column:2;grid-row:1;align-self:end}
.rows--thumbs .row__d{grid-column:2;grid-row:2;align-self:start}
.rows--thumbs .row--index .row__m{grid-column:3;grid-row:1 / span 2}
.rows--thumbs .row svg{grid-column:4;grid-row:1 / span 2}
/* Une vignette = une image plein cadre : la vraie capture du site, ou un gros plan de la maquette 3D du projet sur son fond sombre */
.thumb{display:block;width:132px;height:auto;aspect-ratio:16/10;border-radius:10px;background:#0F0F0F;object-fit:cover;transition:transform .5s var(--ease)}
.thumb[src*="ccfl"]{background:var(--card-2);border:1px solid var(--line-2)}
a.row:hover .thumb{transform:scale(1.04)}
/* Téléphone : vignette plus petite, l'état sous le texte, lignes plus serrées */
@media (max-width:760px){
  .rows--thumbs .row--index{grid-template-columns:76px minmax(0,1fr) 20px;grid-template-rows:auto auto auto;align-items:start;gap:3px 14px;padding-block:18px}
  .rows--thumbs .thumb{width:76px;grid-row:1 / span 3;margin-top:3px;border-radius:8px}
  .rows--thumbs .row__t{font-size:1.16rem;line-height:1.25}
  .rows--thumbs .row__d{font-size:.98rem;line-height:1.45}
  .rows--thumbs .row__t,.rows--thumbs .row__d{align-self:start}
  .rows--thumbs .row--index .row__m{grid-column:2;grid-row:3;margin-top:7px}
  .rows--thumbs .row svg{grid-column:3;grid-row:1;align-self:start;margin-top:5px;width:16px;height:16px}
}

/* ---------- Réalisations ----------
   Chaque étude de cas : un visuel (vraie capture du site, ou maquette 3D) d'un côté, le texte de l'autre. */
.study{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-radius:var(--r-xl);scroll-margin-top:96px}
.study+.study{margin-top:clamp(16px,2vw,24px)}
.study--rev .case__media{order:2}
.case__media{display:grid;place-items:center;min-width:0;padding:clamp(18px,3vw,44px);background:var(--card-2)}
.case__media .scene3d{max-width:480px}
.case__media--shot{position:relative;padding:clamp(22px,3.4vw,52px) clamp(30px,5vw,72px) clamp(30px,4.4vw,60px) clamp(22px,3.4vw,52px);place-items:stretch;align-content:center}
.case__media--shot .pframe{position:absolute;right:clamp(12px,2vw,28px);bottom:clamp(14px,2vw,28px);width:clamp(84px,24%,150px)}
.study__body{padding:clamp(26px,4vw,60px);display:flex;flex-direction:column;gap:16px;align-items:flex-start;justify-content:center}
.study__body>p{color:var(--ink-2)}
.study__body .h3{font-size:clamp(1.6rem,2.8vw,2.3rem)}
.did{display:flex;flex-direction:column;gap:10px;width:100%;font-size:1.02rem;color:var(--ink-2)}
.did li{position:relative;padding-left:22px;line-height:1.5}
.did li::before{content:"";position:absolute;left:1px;top:calc(.75em - 3px);width:6px;height:6px;border-radius:1px;background:var(--accent)}
@media (max-width:900px){
  .study{grid-template-columns:1fr}
  .study--rev .case__media{order:0}
  .case__media .scene3d{max-width:380px}
}

/* ---------- Méthode ---------- */
.method{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:start}
.method__l{position:sticky;top:120px;display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.steps{position:relative;padding-left:64px}
.steps::before{content:"";position:absolute;left:19px;top:24px;bottom:24px;width:1.5px;background:var(--line)}
.steps__bar{position:absolute;left:19px;top:24px;bottom:24px;width:1.5px;background:var(--accent);transform-origin:50% 0;transform:scaleY(var(--p,0));transition:transform .25s linear}
.steps__list{display:flex;flex-direction:column;counter-reset:step}
.step{position:relative;padding:22px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.step:first-child{padding-top:0}.step:last-child{border-bottom:0}
.step::before{counter-increment:step;content:counter(step);position:absolute;left:-64px;top:20px;width:40px;height:40px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--line);display:grid;place-items:center;font-weight:500;font-size:.95rem;color:var(--muted);
  transition:background-color .45s var(--ease),color .45s,border-color .45s}
.step:first-child::before{top:-2px}
.step.is-on::before{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.step p{font-size:1.04rem;color:var(--ink-2);line-height:1.6;max-width:56ch}
@media (max-width:980px){.method{grid-template-columns:1fr}.method__l{position:static}}

/* ---------- À propos ---------- */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.about__quote{font-weight:500;font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.16;letter-spacing:-.035em;text-wrap:balance;padding-top:22px;border-top:2px solid var(--accent);position:sticky;top:120px}
.about__tx{display:flex;flex-direction:column;gap:18px;color:var(--ink-2);max-width:62ch}
.about__sign{font-weight:500;color:var(--ink);margin-top:4px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px;margin-top:10px;width:100%;border-top:1px solid var(--line)}
.facts div{padding-block:15px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.facts dt{font-size:.82rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts dd{color:var(--ink);font-size:1.04rem;line-height:1.45}
@media (max-width:900px){.about{grid-template-columns:1fr}.about__quote{position:static}}
@media (max-width:520px){.facts{grid-template-columns:1fr}}
.path{border-top:1px solid var(--line)}
.path li{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:6px 24px;padding-block:20px;border-bottom:1px solid var(--line);align-items:baseline}
.path time{font-family:var(--mono);font-size:.9rem;color:var(--muted)}
.path b{font-weight:500;font-size:1.1rem;letter-spacing:-.02em;display:block}
.path span{color:var(--ink-2);font-size:1.04rem}
@media (max-width:640px){.path li{grid-template-columns:1fr}}
/* Le parcours est présenté dans un bandeau sombre : filets, dates et textes adaptés */
.band .path{border-top-color:#3B3B38}
.band .path li{border-bottom-color:#3B3B38}
.band .path li:last-child{border-bottom:0;padding-bottom:0}
.band .path time{color:#2EDB8A}
.band .path b{font-size:1.18rem}
.band .path span{color:#CFCEC8}
.band__head .label{margin:0}
.tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.tools h3{font-size:.84rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.tools li{padding-block:5px;font-size:1.02rem;line-height:1.35}
@media (max-width:1020px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Téléphone : les outils restent sur deux colonnes, la liste est deux fois moins haute */
@media (max-width:560px){.tools{gap:26px 18px}.tools li{font-size:.98rem}}

/* ---------- Contact ---------- */
/* L'en-tête contient aussi les coordonnées : à côté de la maquette sur ordinateur, avant elle sur téléphone */
.page-head--contact{grid-template-areas:"tx stage" "cards cards"}
.page-head--contact .page-head__tx{grid-area:tx}
.page-head--contact .scene3d{grid-area:stage}
.page-head--contact .ccards{grid-area:cards;margin-top:clamp(4px,1.6vw,20px)}
@media (max-width:900px){
  .page-head--contact{grid-template-areas:"tx" "cards" "stage";gap:24px}
  .page-head--contact .scene3d{max-width:340px}
}
.ccards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);width:100%}
.ccard{display:flex;flex-direction:column;gap:8px;align-items:flex-start;text-align:left;padding:clamp(22px,2.6vw,32px);border-radius:var(--r-lg);background:var(--card);color:var(--ink);text-decoration:none;min-height:180px;transition:background-color .35s}
.ccard small{font-size:.84rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ccard span{font-weight:500;font-size:clamp(1.1rem,1.7vw,1.4rem);letter-spacing:-.025em;overflow-wrap:anywhere;line-height:1.25}
.ccard svg{width:20px;height:20px;margin-top:auto;transition:transform .45s var(--ease),color .3s}
a.ccard:hover{background:var(--card-2)}
a.ccard:hover svg{transform:translate(4px,-4px);color:var(--accent)}
.ccard.is-todo span{font-family:var(--mono);font-weight:500;font-size:.92rem;letter-spacing:0;color:var(--muted);border:1.5px dashed var(--line-2);border-radius:8px;padding:5px 10px}
.ccard.is-todo svg{opacity:.3}
@media (max-width:820px){.ccards{grid-template-columns:1fr}.ccard{min-height:0}}
.ccards__wa{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:6px;color:var(--ink-2)}
.ccards__wa .link svg{width:14px;height:14px}
.contact-more{display:flex;flex-wrap:wrap;align-items:center;gap:14px 36px;margin-top:28px}

@media (prefers-reduced-motion:reduce){
  html,html.is-ready{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  [data-split],.fade-in{opacity:1;transform:none;animation:none}
  .js .rv{opacity:1;transform:none}
  .js .reveal-text .rw{--o:1}
  .js .bigname:not(.is-in) .bigname__t{--rise:0%}
}
@media print{.nav,.progress,.menu{display:none}.js .rv{opacity:1;transform:none}.js .reveal-text .rw{--o:1}}

/* ---------- Contact : le CV, une feuille posée sur un plateau sombre ---------- */
.section--cv{padding-block:clamp(28px,4vw,56px) 0}
.section--tips{padding-top:clamp(28px,4vw,56px)}
.cv{overflow:hidden;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:stretch;padding-block:clamp(32px,4.4vw,64px)}
.cv .band__tx{align-self:center}
.cv__facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,2vw,28px);width:100%;margin:4px 0 2px}
.cv__facts div{padding-top:14px;border-top:1px solid #3B3B38}
.cv__facts dt{font-size:.84rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#2EDB8A;margin-bottom:6px}
.cv__facts dd{margin:0;color:#FFFFFF;font-size:1rem;line-height:1.45}
.cv__note{color:#CFCEC8;font-size:.92rem}
.btn--view svg{width:17px;height:17px}
.btn--view:hover svg{transform:scale(1.14)}
.cv__stage{position:relative;cursor:zoom-in;min-height:440px;margin-bottom:calc(-1 * clamp(32px,4.4vw,64px))}
.cv__sheet{position:absolute;left:50%;top:6px;width:min(100%,430px);height:auto;aspect-ratio:660 / 933;background:#FFFFFF;border-radius:6px;box-shadow:0 34px 70px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.06);transform:translateX(-50%) rotate(2.4deg);transform-origin:50% 100%;transition:transform .7s var(--ease)}
.cv__sheet--back{background:#DEDDD6;transform:translateX(-53%) rotate(-3.2deg)}
.cv:hover .cv__sheet:not(.cv__sheet--back){transform:translateX(-50%) translateY(-10px) rotate(1.2deg)}
.cv:hover .cv__sheet--back{transform:translateX(-54%) rotate(-4.4deg)}
@media (max-width:900px){
  .cv{grid-template-columns:1fr}
  .cv__stage{min-height:300px;margin-top:8px}
  .cv__sheet{width:min(88%,380px)}
}
@media (max-width:620px){
  .cv__facts{grid-template-columns:1fr;gap:0}
  .cv__facts div{padding-block:12px}
  .cv__stage{min-height:250px}
}
@media (prefers-reduced-motion:reduce){.cv__sheet{transition:none}.cv:hover .cv__sheet:not(.cv__sheet--back){transform:translateX(-50%) rotate(2.4deg)}.cv:hover .cv__sheet--back{transform:translateX(-53%) rotate(-3.2deg)}}

/* ---------- Aperçu du CV dans la page : une feuille en vrai texte, dans une fenêtre ---------- */
dialog.cvview{border:0;padding:0;width:min(940px,calc(100% - 32px));height:min(92vh,1240px);max-height:none;border-radius:var(--r-lg);background:var(--card-2);color:var(--ink);box-shadow:var(--shadow-lg);overflow:hidden}
dialog.cvview[open]{display:flex;flex-direction:column;animation:dlg .5s var(--ease)}
dialog.cvview::backdrop{background:rgba(10,10,10,.6);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
.cvview__bar{flex:none;display:flex;align-items:center;gap:10px 22px;padding:12px 12px 12px clamp(18px,3vw,28px);background:var(--surface);border-bottom:1px solid var(--line)}
.cvview__t{font-weight:500;font-size:1.12rem;letter-spacing:-.02em;margin-right:auto}
.cvview__lang,.cvview__pdf{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:.98rem;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;white-space:nowrap}
.cvview__lang:hover,.cvview__pdf:hover{color:var(--accent)}
.cvview__pdf svg{width:13px;height:13px}
.cvview__close{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--ink);transition:background-color .3s,border-color .3s}
.cvview__close:hover{background:var(--card);border-color:var(--ink)}
.cvview__close svg{width:18px;height:18px}
.cvview__scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:clamp(14px,3vw,34px)}
.cvview__scroll:focus-visible{outline-offset:-5px}
.cvd{background:#FFFFFF;border-radius:6px;box-shadow:var(--shadow-sm);padding:clamp(22px,5vw,56px);max-width:860px;margin-inline:auto;font-size:.98rem;line-height:1.5;color:var(--ink-2)}
.cvd__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 32px;padding-bottom:22px;border-bottom:2px solid var(--ink)}
.cvd__name{font-weight:600;font-size:clamp(1.9rem,4vw,2.5rem);letter-spacing:-.035em;line-height:1.05;color:var(--ink)}
.cvd__role{margin-top:8px;font-weight:600;font-size:1.04rem;color:var(--accent);max-width:34ch}
.cvd__contact{display:flex;flex-direction:column;gap:2px;text-align:right;font-size:.95rem}
.cvd__contact li:first-child{font-weight:600;color:var(--ink)}
.cvd__contact a{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px;overflow-wrap:anywhere}
.cvd__contact a:hover{color:var(--accent);text-decoration-color:currentColor}
.cvd__cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,260px);gap:clamp(24px,4vw,44px);margin-top:26px}
.cvd section+section{margin-top:26px}
.cvd h3{font-size:.84rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);padding-bottom:8px;margin-bottom:14px;border-bottom:1px solid var(--line-2)}
.cvd strong{font-weight:600;color:var(--ink)}
.cvd__jobs li+li{margin-top:16px}
.cvd__jobh{display:flex;justify-content:space-between;align-items:baseline;gap:4px 18px}
.cvd__jobh .cvd__when{flex:none}
.cvd__jobh strong{font-size:1.04rem;letter-spacing:-.01em}
.cvd__when{font-family:var(--mono);font-size:.84rem;color:var(--muted);white-space:nowrap}
.cvd__org{font-weight:600;font-size:.95rem;color:var(--accent);margin:1px 0 4px}
.cvd__edu li+li,.cvd__kv li+li{margin-top:10px}
.cvd__edu .cvd__when,.cvd__edu strong{display:block}
.cvd__edu p{font-size:.95rem}
.cvd__plain li+li{margin-top:4px}
@media (max-width:760px){
  dialog.cvview{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border-radius:0}
  .cvview__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:8px 10px 4px 16px;gap:0 22px}
  .cvview__t{grid-column:1 / 3;grid-row:1}
  .cvview__close{grid-column:3;grid-row:1}
  .cvview__lang{grid-column:1;grid-row:2}
  .cvview__pdf{grid-column:2;grid-row:2;justify-self:start}
  .cvd__head{align-items:flex-start;flex-direction:column}
  .cvd__contact{text-align:left}
  .cvd__cols{grid-template-columns:1fr}
  .cvd__jobh{flex-direction:column;gap:2px}
}
@media (prefers-reduced-motion:reduce){dialog.cvview[open]{animation:none}}