/* =========================================================================
   LEMG Studio : mini-site « AI Speech Data » (une page, FR + EN).
   Chargee UNIQUEMENT sur les deux pages du mini-site (voir lemg_speech_assets).
   Le mini-site doit ressembler au site principal : fond clair, hero de l'accueil
   (`.xhero`), meme rythme de sections (blanc / #f6f6f8 / #faf4f5) et meme pied de
   page sombre. On ne fait qu'ajouter un registre « fiche technique » par-dessus.
   Prefixe .sd- partout, donc aucune collision possible avec le reste du site.
   ========================================================================= */

.lemg-sd{
  --sd-ink:#0d0d10;          /* fond sombre */
  --sd-ink2:#16161b;
  --sd-line-d:rgba(255,255,255,.13);
  --sd-txt-d:rgba(255,255,255,.72);
  --sd-paper:#ffffff;
  --sd-paper2:#f6f6f8;
  --sd-line:#e4e4e9;
  --sd-txt:#16161a;
  --sd-txt2:#5a5a62;
  --sd-red:#a01829;
  --sd-red2:#c61f37;
  --sd-mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sd-ease:cubic-bezier(.16,1,.3,1);
  --sd-w:1180px;
  background:var(--sd-paper);
  color:var(--sd-txt);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* PAS de reset `*` ni `img` ici : main.css porte deja `*{box-sizing:border-box}` et
   `img{max-width:100%;height:auto}`. En les redeclarant sous `.lemg-sd` on montait
   la specificite a (0,1,1), ce qui ecrasait les regles de composant du theme, dont
   `.logos-track img{height:52px}` : les logos clients s'affichaient en taille reelle. */

.sd-wrap{width:min(100% - 40px,var(--sd-w));margin-inline:auto}

.sd-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--sd-red);color:#fff;padding:12px 18px;border-radius:0 0 10px 0}
.sd-skip:focus{left:0}

/* AUCUNE regle de couleur sur `a` ici : main.css porte deja `a{color:inherit}` en
   (0,0,1), que toutes les regles de composant battent naturellement. Une version
   prefixee montait a (0,1,1) ou (0,2,1) et ecrasait `.sd-nav a`, `.sd-ct-mail a`,
   `.sd-foot-col a` et le texte des boutons rouges. Meme piege que le reset `img`. */
.lemg-sd :focus-visible{outline:2px solid var(--sd-red2);outline-offset:3px;border-radius:4px}

/* ---------- Reveal (l'observer vit deja dans main.js) ---------- */
.lemg-sd .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--sd-ease),transform .7s var(--sd-ease)}
.lemg-sd .reveal.in{opacity:1;transform:none}

/* =========================================================================
   EN-TETE : blanche, posee sur le hero clair.
   `top` suit la barre d'admin WordPress quand on est connecte (32 px, 46 px
   sous 782 px de large, ou la barre passe elle-meme en position statique).
   ========================================================================= */
.sd-head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);backdrop-filter:saturate(150%) blur(16px);border-bottom:1px solid var(--sd-line)}
body.admin-bar .sd-head{top:32px}
@media screen and (max-width:782px){
  body.admin-bar .sd-head{top:46px}
}
@media screen and (max-width:600px){
  body.admin-bar .sd-head{top:0}   /* sous 600 px la barre d'admin ne colle plus */
}
/* Pleine largeur avec le meme retrait que l'accueil (4vw) et `space-between` :
   la marque va a gauche, les actions a droite, la navigation respire au milieu.
   Avant, un conteneur a largeur maxi tassait tout au centre. */
.sd-head-in{width:100%;padding:0 4vw;display:flex;align-items:center;justify-content:space-between;gap:32px;height:78px;position:relative}

/* La marque ne doit jamais se couper en deux lignes quand la barre se resserre. */
.sd-head-in .brand{white-space:nowrap;flex:0 0 auto}

.sd-nav{display:flex;gap:6px}
.sd-nav a.sd-nav-cta{display:none}   /* n'apparait que dans le panneau du burger */
.sd-nav a{color:var(--sd-txt2);text-decoration:none;font-size:14px;font-weight:500;padding:9px 14px;border-radius:99px;position:relative;white-space:nowrap;transition:color .25s,background .25s}
.sd-nav a:hover{color:var(--sd-txt);background:var(--sd-paper2)}
.sd-nav a.on{color:var(--sd-red);background:#faf4f5;font-weight:600}

.sd-head-end{display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* Selecteur de langue : UNIQUEMENT le drapeau de destination, avec son libelle.
   Afficher aussi le drapeau courant brouillait la lecture (on croyait choisir).
   Drapeaux en SVG inline : Windows n'affiche pas les emojis drapeaux en couleur. */
.sd-lang{display:inline-flex;align-items:center;gap:9px;color:var(--sd-txt2);text-decoration:none;font-size:13px;font-weight:600;padding:6px 15px 6px 9px;border:1px solid var(--sd-line);border-radius:99px;background:#fff;transition:.25s}
.sd-lang:hover{color:var(--sd-txt);border-color:var(--sd-txt2);box-shadow:0 3px 12px rgba(0,0,0,.07)}
.sd-flag{display:inline-flex;width:24px;height:16px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.12) inset;flex:0 0 auto}
.sd-flag svg{width:100%;height:100%;display:block}

.sd-progress{height:2px;background:var(--sd-red);width:0;transition:width .1s linear}

.sd-burger{display:none;width:40px;height:40px;background:none;border:1px solid var(--sd-line);border-radius:10px;cursor:pointer;padding:0;position:relative}
.sd-burger span{position:absolute;left:11px;right:11px;height:1.6px;background:var(--sd-txt);transition:.3s var(--sd-ease)}
.sd-burger span:nth-child(1){top:16px}
.sd-burger span:nth-child(2){top:22px}
.sd-burger[aria-expanded="true"] span:nth-child(1){top:19px;transform:rotate(45deg)}
.sd-burger[aria-expanded="true"] span:nth-child(2){top:19px;transform:rotate(-45deg)}

/* ---------- Boutons ---------- */
/* Les boutons sont des liens : il faut battre `.lemg-sd a{color:inherit}` (0,1,1),
   donc on prefixe par `.lemg-sd` (0,2,0). Sans ce prefixe, le texte des boutons
   rouges heritait du noir de la page. */
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:99px;font-weight:600;font-size:14.5px;text-decoration:none;border:1.5px solid transparent;transition:.3s var(--sd-ease);cursor:pointer;text-align:center}
.lemg-sd .sd-btn-red{background:var(--sd-red);color:#fff;border-color:var(--sd-red)}
.lemg-sd .sd-btn-red:hover{background:var(--sd-red2);border-color:var(--sd-red2);color:#fff;transform:translateY(-2px)}
.lemg-sd .sd-btn-ghost{border-color:var(--sd-line2,#c9c9d1);color:var(--sd-txt);background:#fff}
.lemg-sd .sd-btn-ghost:hover{border-color:var(--sd-txt);background:rgba(0,0,0,.04);color:var(--sd-txt)}
.sd-head-cta{padding:10px 20px;font-size:13.5px}

/* =========================================================================
   HERO : reprend le fond sinusoidal de l'accueil.
   `.xhero` (main.css) fournit le plein ecran et le canvas en absolu ; on ne
   surcharge ici que la typographie, calibree pour une phrase et pas pour un logo.
   ========================================================================= */
/* Pas de `background` ici : on garde volontairement le degrade radial de `.xhero`
   (main.css), pour que le hero soit rigoureusement celui de l'accueil. */
.sd-hero{min-height:auto;padding:clamp(70px,11vh,120px) 0 clamp(56px,8vh,86px)}
.sd-hero-in{position:relative;z-index:2;text-align:center;width:min(100% - 40px,var(--sd-w));margin-inline:auto}

/* Le titre reprend `.xhero-title` (meme animation, meme rouge sur le 2e mot).
   On ne fait que le recentrer et l'espacer un peu differemment. */
.sd-title{margin:0;text-transform:uppercase}

/* Logos clients et galerie defilante : AUCUNE regle ici. Le balisage reprend
   `.sp-trust` et `.sec sec-light ls-gal-sec` de l'accueil, donc main.css suffit.
   Toute surcharge locale finirait par ecraser les regles du theme. */

/* ---------- Bandeau de positionnement (ex-contenu du hero) ---------- */
.sd-intro{padding:clamp(50px,7vw,86px) 0;background:var(--sd-paper2);text-align:center}
.sd-intro-lead{font-size:clamp(1.1rem,2vw,1.45rem);line-height:1.55;color:var(--sd-txt);max-width:56ch;margin:0 auto 18px;font-weight:500}
.sd-intro-hook{font-size:15.5px;line-height:1.65;color:var(--sd-txt2);max-width:52ch;margin:0 auto 40px}


/* ---------- Echelle de volume ----------
   Les deux bornes en tres gros, reliees par un degre gris vers rouge. C'est
   l'element le plus voyant de la zone, a dessein : un acheteur cherche ce
   chiffre avant tout le reste. */
.sd-scaleband{margin-top:38px;background:#fff;border:1px solid var(--sd-line);border-radius:20px;padding:34px 32px}
.sd-scaleband-k{font-family:var(--sd-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sd-txt2);margin:0 0 20px}
.sd-scaleband-bar{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,30px)}
.sd-scaleband-v{font-size:clamp(1.7rem,4.6vw,3.1rem);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--sd-txt);white-space:nowrap}
.sd-scaleband-v-max{color:var(--sd-red)}
.sd-scaleband-line{flex:1 1 auto;max-width:360px;height:4px;border-radius:4px;position:relative;
  background:linear-gradient(90deg,var(--sd-line2,#d9d9de),var(--sd-red))}
.sd-scaleband-line::before,.sd-scaleband-line::after{content:"";position:absolute;top:50%;width:11px;height:11px;border-radius:50%;transform:translateY(-50%)}
.sd-scaleband-line::before{left:-4px;background:var(--sd-line2,#d9d9de)}
.sd-scaleband-line::after{right:-4px;background:var(--sd-red)}
.sd-scaleband-note{margin:22px auto 0;font-size:14.5px;line-height:1.62;color:var(--sd-txt2);max-width:72ch}
@media (max-width:560px){
  .sd-scaleband{padding:26px 20px}
  .sd-scaleband-bar{gap:12px}
  .sd-scaleband-line{max-width:none}
}

/* ---------- « Vous avez deja un cahier des charges ? » ----------
   Carte posee en fin de bandeau d'introduction : c'est le premier reflexe de
   verification d'un responsable d'acquisition de donnees. */
.sd-spec{margin-top:34px;background:#fff;border:1px solid var(--sd-line);border-left:4px solid var(--sd-red);border-radius:18px;padding:30px 30px 26px;text-align:left}
.sd-spec-h{font-size:clamp(1.1rem,1.8vw,1.3rem);font-weight:700;margin:0 0 10px;color:var(--sd-txt)}
.sd-spec-body{font-size:14.5px;line-height:1.68;color:var(--sd-txt2);margin:0 0 20px;max-width:78ch}
.sd-spec-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.sd-spec-list li{font-family:var(--sd-mono);font-size:12px;color:var(--sd-txt);
  background:var(--sd-paper2);border:1px solid var(--sd-line);border-radius:7px;padding:7px 12px}


  display:flex;align-items:center;gap:12px;transition:background .25s}
.sd-details>summary::-webkit-details-marker{display:none}
.sd-details>summary::before{content:"";width:9px;height:9px;border-right:2px solid var(--sd-red);border-bottom:2px solid var(--sd-red);
  transform:rotate(45deg);transition:transform .3s var(--sd-ease);flex:0 0 auto;margin-top:-4px}
.sd-details[open]>summary::before{transform:rotate(-135deg);margin-top:3px}
.sd-details>summary:hover{background:var(--sd-paper2)}
.sd-details .sd-two{padding:2px 24px 26px;gap:26px}
.sd-details .sd-panel{border:0;padding:0;background:transparent}


/* ---------- Audioscope avant le pied de page ----------
   `.audioscope-sec` (main.css) porte deja la hauteur et le fond blanc, exactement
   comme sur le site principal. Rien a surcharger. */

/* =========================================================================
   SECTIONS
   ========================================================================= */
/* Rythme des fonds calque sur le site principal : blanc, gris clair (--bg2),
   rose tres pale (--soft). Aucune section sombre, comme sur lemgstudio.com. */
.sd-sec{padding:clamp(64px,9vw,110px) 0}
.sd-sec-soft{background:var(--sd-paper2)}

.sd-sechead{max-width:62ch;margin-bottom:52px}
/* Meme calibre que `.psec-label` du site principal (17 px, graisse 800, .16em) :
   a 11 px en monospace, ces libelles de section paraissaient minuscules a cote
   des titres. Le numero reste en chiffres monospace, mais a l'echelle du libelle. */
.sd-seclabel{display:flex;align-items:center;gap:14px;font-size:17px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--sd-red);margin:0 0 18px;line-height:1.25}
.sd-num{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:32px;border:1.5px solid currentColor;border-radius:8px;
  font-family:var(--sd-mono);font-size:14px;font-weight:700;letter-spacing:.02em;opacity:.9;flex:0 0 auto}
.sd-h2{font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:0 0 18px;color:var(--sd-txt)}
.sd-h3{font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.25;font-weight:700;margin:0 0 14px;color:var(--sd-txt)}
.sd-lead{font-size:16.5px;line-height:1.68;color:var(--sd-txt2);margin:0}
.sd-body{font-size:15.5px;line-height:1.72;color:var(--sd-txt2);margin:0 0 18px}
.sd-note{font-size:13.5px;line-height:1.62;color:var(--sd-txt2);border-left:2px solid var(--sd-line);padding-left:16px;margin:34px 0 0;max-width:76ch}
.sd-fine{font-size:13px;color:var(--sd-txt2);margin:16px 0 0}

/* ---------- 01 Capabilities ---------- */
.sd-capgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.sd-cap{background:var(--sd-paper);border:1px solid var(--sd-line);border-radius:18px;padding:30px 28px}
.sd-sec-soft .sd-cap{background:#fff}
.sd-cap-h{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;margin:0 0 22px;letter-spacing:-.01em}
.sd-cap-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;background:#faf4f5;color:var(--sd-red);flex:0 0 auto}
.sd-cap-ic svg{width:19px;height:19px}
/* Prestations en accordeon : le titre seul est visible, la description se deplie.
   Chaque ligne est separee par un filet, le chevron rouge indique l'etat. */
.sd-cap-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sd-cap-list li{border-top:1px solid var(--sd-line)}
.sd-cap-list li:first-child{border-top:0}
.sd-cap-d>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;
  padding:13px 0;font-size:14.5px;font-weight:600;color:var(--sd-txt);transition:color .2s}
.sd-cap-d>summary::-webkit-details-marker{display:none}
.sd-cap-d>summary::after{content:"";margin-left:auto;width:8px;height:8px;
  border-right:2px solid var(--sd-red);border-bottom:2px solid var(--sd-red);
  transform:rotate(45deg);transition:transform .3s var(--sd-ease);flex:0 0 auto;margin-top:-4px}
.sd-cap-d[open]>summary::after{transform:rotate(-135deg);margin-top:3px}
.sd-cap-d>summary:hover{color:var(--sd-red)}
.sd-cap-d p{font-size:13.5px;line-height:1.62;color:var(--sd-txt2);margin:0 0 15px;padding-right:20px}

/* ---------- 02 Workflow ---------- */
/* Chronologie verticale : un trait descend au centre, les pastilles numerotees
   sont posees dessus et les etapes alternent de part et d'autre. Le trait se
   remplit en rouge au fil du defilement (hauteur pilotee par speech-data.js).
   `nth-of-type` et pas `nth-child` : LiteSpeed insere des <noscript> qui
   decaleraient le comptage. */
.sd-flow{position:relative;list-style:none;margin:0;padding:0;display:block}
.sd-flow-rail{position:absolute;left:50%;top:12px;bottom:12px;width:2px;transform:translateX(-50%);
  background:var(--sd-line2,#d9d9de);z-index:0;border-radius:2px;overflow:hidden}
.sd-flow-rail i{display:block;width:100%;height:0;background:var(--sd-red);transition:height 1.1s var(--sd-ease)}

.sd-step{position:relative;z-index:1;display:grid;grid-template-columns:1fr 84px 1fr;align-items:center;
  padding:16px 0;opacity:.38;transform:translateY(14px);transition:opacity .55s var(--sd-ease),transform .55s var(--sd-ease)}
.sd-step.on{opacity:1;transform:none}

/* impaire a gauche, paire a droite */
.sd-step-in{grid-column:1;grid-row:1;text-align:right;padding-right:16px}
.sd-step:nth-of-type(even) .sd-step-in{grid-column:3;text-align:left;padding-right:0;padding-left:16px}

.sd-step-n{grid-column:2;grid-row:1;justify-self:center;display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:50%;border:2px solid var(--sd-line2,#d9d9de);background:#fff;
  font-family:var(--sd-mono);font-size:14px;font-weight:700;color:var(--sd-txt2);transition:.5s var(--sd-ease)}
.sd-step.on .sd-step-n{border-color:var(--sd-red);color:#fff;background:var(--sd-red);box-shadow:0 0 0 6px rgba(160,24,41,.10)}

.sd-step h3{font-size:16px;font-weight:700;margin:0 0 7px;color:var(--sd-txt)}
.sd-step p{font-size:13.5px;line-height:1.62;color:var(--sd-txt2);margin:0;max-width:44ch}
.sd-step-in{justify-self:end}
.sd-step:nth-of-type(even) .sd-step-in{justify-self:start}

/* ---------- 03 Studio ---------- */
.sd-studio{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:28px;align-items:center;margin-bottom:26px}
.sd-studio-ph{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--sd-line)}
.sd-studio-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sd-callout{background:#faf4f5;border:1px solid var(--sd-line);border-left:4px solid var(--sd-red);border-radius:18px;padding:34px 32px}
.sd-callout h3{font-size:18px;font-weight:700;margin:0 0 12px;color:var(--sd-txt)}
.sd-callout p{font-size:14.5px;line-height:1.7;color:var(--sd-txt2);margin:0}

.sd-two{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.sd-panel{background:var(--sd-paper);border:1px solid var(--sd-line);border-radius:18px;padding:30px 28px}
.sd-sec-soft .sd-panel{background:#fff}
.sd-panel-plain{background:transparent;border:0;padding:0}
.sd-panel-h{font-family:var(--sd-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--sd-txt2);margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--sd-line)}

.sd-specs{margin:0;display:grid;gap:0}
.sd-specs>div{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;padding:13px 0;border-bottom:1px dashed var(--sd-line)}
.sd-specs>div:last-child{border-bottom:0;padding-bottom:0}
.sd-specs dt{font-size:13px;color:var(--sd-txt2)}
.sd-specs dd{margin:0;font-size:13.5px;font-weight:500;line-height:1.5}

.sd-ticks{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.sd-ticks li{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5}
.sd-ticks svg{width:16px;height:16px;color:var(--sd-red);flex:0 0 auto;margin-top:2px}

/* ---------- 04 Dual speaker ---------- */
/* Photo du studio a droite, encart a gauche. */
.sd-duo-ph{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--sd-line)}
.sd-duo-ph img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sd-duo{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:34px;align-items:center}
.sd-keybox{background:#fff;border:1px solid var(--sd-line);border-left:3px solid var(--sd-red);border-radius:14px;padding:22px 24px;margin:0 0 22px}
/* Variante pleine largeur, utilisee dans la section « pour les acteurs de l'IA ». */
.sd-keybox-wide{margin:6px 0 26px;max-width:none}
.sd-keybox h3{font-size:15px;font-weight:700;margin:0 0 9px}
.sd-keybox p{font-size:14px;line-height:1.68;color:var(--sd-txt2);margin:0}

.sd-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.sd-chips li{font-size:13px;font-weight:500;padding:8px 15px;border:1px solid var(--sd-line);border-radius:99px;background:#fff}
.sd-chips-lg li{font-size:13.5px;padding:9px 17px}


/* ---------- 06 French ---------- */
.sd-fr{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.sd-fr-list{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--sd-line);border:1px solid var(--sd-line);border-radius:16px;overflow:hidden}
.sd-fr-list li{background:#fff;padding:16px 22px;font-size:14.5px;color:var(--sd-txt);display:flex;align-items:center;gap:12px}
.sd-fr-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sd-red);flex:0 0 auto}

/* ---------- 07 Use cases ---------- */
.sd-uses{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--sd-line);border:1px solid var(--sd-line);border-radius:18px;overflow:hidden}
.sd-uses li{background:#fff;padding:22px 24px;display:flex;align-items:center;gap:16px;font-size:15px;font-weight:500;transition:background .3s}
.sd-uses li:hover{background:#faf4f5}
.sd-use-n{font-family:var(--sd-mono);font-size:11.5px;color:var(--sd-red);opacity:.75;flex:0 0 auto}


/* ---------- 10 Why ---------- */
.sd-why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sd-whycard{border:1px solid var(--sd-line);border-radius:18px;padding:28px 26px;transition:.35s var(--sd-ease)}
.sd-whycard:hover{border-color:var(--sd-red);transform:translateY(-3px)}
.sd-whycard h3{font-size:15.5px;font-weight:700;margin:0 0 11px}
.sd-whycard p{font-size:13.8px;line-height:1.68;color:var(--sd-txt2);margin:0}

/* ---------- 11 Contact ---------- */
.sd-ct-mail{font-size:15px;margin:26px 0 6px;color:var(--sd-txt2);padding-top:22px;border-top:1px solid var(--sd-line)}
.sd-ct-mail a{color:var(--sd-red);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.sd-ct-place{font-family:var(--sd-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sd-txt2);margin:0}
/* Formulaire pleine largeur : plus de colonne de texte a cote. */
.sd-ct-form{background:#fff;border:1px solid var(--sd-line);border-radius:20px;padding:34px 32px;color:var(--sd-txt);box-shadow:0 18px 50px rgba(0,0,0,.06)}
.sd-ct-form .sd-panel-h{margin-bottom:20px}

/* FluentForm : alignement sur le registre du mini-site */
.sd-ct-form .ff-el-group{margin-bottom:16px}
.sd-ct-form .ff-el-input--label label{font-size:13.5px;font-weight:600;color:var(--sd-txt)}
.sd-ct-form input[type=text],.sd-ct-form input[type=email],.sd-ct-form input[type=url],
.sd-ct-form input[type=number],.sd-ct-form select,.sd-ct-form textarea{
  width:100%;border:1px solid var(--sd-line)!important;border-radius:10px!important;
  padding:11px 13px!important;font-family:inherit!important;font-size:14px!important;background:#fff!important;color:var(--sd-txt)!important}
.sd-ct-form input:focus,.sd-ct-form select:focus,.sd-ct-form textarea:focus{border-color:var(--sd-red)!important;box-shadow:0 0 0 3px rgba(160,24,41,.12)!important;outline:none}
.sd-ct-form .ff-btn-submit{background:var(--sd-red)!important;border-color:var(--sd-red)!important;border-radius:99px!important;padding:13px 30px!important;font-weight:600!important;font-size:14.5px!important}
.sd-ct-form .ff-btn-submit:hover{background:var(--sd-red2)!important;border-color:var(--sd-red2)!important}

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */
/* Meme fond que le pied de page du site principal (#0d0d0f), et meme gris de
   texte (#a9a9a9) pour rester lisible sans agresser. */
.sd-foot{background:#0d0d0f;color:#a9a9a9;padding:60px 0 30px}
.sd-foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,.8fr));gap:34px;padding-bottom:34px;border-bottom:1px solid var(--sd-line-d)}
.sd-foot-brand p{font-size:13.5px;line-height:1.62;color:rgba(255,255,255,.66);margin:12px 0 18px;max-width:38ch}
.sd-foot-back{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:#fff;text-decoration:none;border-bottom:1px solid var(--sd-red2);padding-bottom:3px;transition:.25s}
.sd-foot-back:hover{color:var(--sd-red2)}
.sd-foot-col{display:flex;flex-direction:column;gap:11px}
.sd-foot-col a{font-size:13.5px;color:rgba(255,255,255,.72);text-decoration:none;transition:color .25s}
.sd-foot-col a:hover{color:#fff}
.sd-foot-copy{font-size:12.5px;color:rgba(255,255,255,.55);margin:22px 0 0;text-align:center}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
/* ---------------------------------------------------------------------------
   EN-TETE : la bascule en menu burger se fait TOT (1150 px) et non a 900 px.
   Avec 6 entrees de navigation, le selecteur de langue et le bouton rouge, la
   barre debordait deja vers 1250 px : le bouton sortait de l'ecran et la marque
   se cassait en deux lignes. Trois paliers, du plus large au plus etroit.
   --------------------------------------------------------------------------- */
@media (max-width:1400px){
  .sd-head-in{gap:18px;padding:0 3vw}
  .sd-nav a{font-size:13.5px;padding:9px 11px}
}
@media (max-width:1320px){
  .sd-head-cta{display:none}   /* redondant avec l'entree Contact et le bouton du hero */
  .sd-lang-txt{display:none}   /* le drapeau seul suffit */
}
@media (max-width:1150px){
  .sd-head-in{height:66px;gap:14px;padding:0 20px}
  .sd-burger{display:block}
  /* Panneau en absolu SOUS l'en-tete : il suit donc automatiquement le decalage
     de la barre d'admin, sans avoir a recalculer un `top` fixe. */
  .sd-nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:6px 20px 18px;margin:0;
    border-bottom:1px solid var(--sd-line);box-shadow:0 18px 40px rgba(0,0,0,.10);
    transform:translateY(-10px);opacity:0;pointer-events:none;transition:.32s var(--sd-ease);max-height:calc(100dvh - 120px);overflow-y:auto}
  .sd-nav.open{transform:none;opacity:1;pointer-events:auto}
  .sd-nav a{padding:14px 12px;border-bottom:1px solid var(--sd-line);font-size:15px;border-radius:0}
  .sd-nav a:last-child{border-bottom:0}
  /* Le bouton rouge masque plus haut revient ICI, en bas du panneau : rien ne
     doit devenir inaccessible en passant au burger. */
  /* Prefixe `a.` obligatoire : `.sd-nav a` vaut (0,1,1) et battrait un simple
     `.sd-nav-cta` en (0,1,0), ce qui laissait le texte gris sur le fond rouge. */
  .sd-nav a.sd-nav-cta{display:flex;align-items:center;justify-content:center;margin-top:14px;padding:14px 22px;
    background:var(--sd-red);color:#fff;border-radius:99px;font-weight:600;font-size:15px;border-bottom:0}
  .sd-nav a.sd-nav-cta:hover{background:var(--sd-red2);color:#fff}
}

@media (max-width:1080px){
  .sd-why{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  /* Panneau en absolu SOUS l'en-tete : il suit donc automatiquement le decalage
     de la barre d'admin, sans avoir a recalculer un `top` fixe. */
  .sd-nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;padding:6px 20px 18px;margin:0;
    border-bottom:1px solid var(--sd-line);box-shadow:0 18px 40px rgba(0,0,0,.10);
    transform:translateY(-10px);opacity:0;pointer-events:none;transition:.32s var(--sd-ease);max-height:calc(100dvh - 120px);overflow-y:auto}
  .sd-nav.open{transform:none;opacity:1;pointer-events:auto}
  .sd-nav a{padding:14px 12px;border-bottom:1px solid var(--sd-line);font-size:15px;border-radius:0}
  .sd-nav a:last-child{border-bottom:0}

  .sd-hero{padding:64px 0 60px}
  .sd-sec{padding:64px 0}
  .sd-sechead{margin-bottom:36px}
  .sd-seclabel{font-size:15px;letter-spacing:.13em;gap:11px}
  .sd-num{min-width:35px;height:29px;font-size:13px}
  .sd-capgrid,.sd-two,.sd-duo,.sd-fr,.sd-studio,.sd-uses{grid-template-columns:1fr}
  .sd-why{grid-template-columns:1fr}
  .sd-duo{gap:26px}
  .sd-fr{gap:28px}
    .sd-foot-in{grid-template-columns:1fr;gap:26px}
}

@media (max-width:560px){
  /* `.sd-head-in` reste en pleine largeur : c'est son padding qui gere les marges. */
  .sd-wrap{width:min(100% - 28px,var(--sd-w))}
  .sd-head-in{padding:0 14px}
  /* Sous 900 px : le trait passe a gauche et tout le contenu s'aligne a droite. */
  .sd-flow-rail{left:27px;transform:none}
  .sd-step{grid-template-columns:54px 1fr;align-items:start;padding:14px 0}
  .sd-step-n{grid-column:1;justify-self:start}
  .sd-step-in,.sd-step:nth-of-type(even) .sd-step-in{grid-column:2;text-align:left;padding:0 0 0 20px;justify-self:start}
  .sd-step p{max-width:none}
  .sd-cap,.sd-panel,  .sd-callout{padding:26px 22px}
  .sd-ct-form{padding:24px 20px}
  .sd-specs>div{grid-template-columns:1fr;gap:4px}
  .xhero-cta .mbtn{width:100%;justify-content:center}
}