/* Recov'Up, feuille de style du site commercial.
   Un seul fichier : le site est statique, il n'y a pas de build. */

/* Polices servies par le site : aucune requete vers Google.
   Inter est une police variable (400 a 600), Roboto Mono en 500 seulement. */
@font-face {
  font-family: Inter; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/assets/polices/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: Inter; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url(/assets/polices/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/polices/roboto-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/polices/roboto-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --blanc: #FFFFFF;
  --ivoire: #F8FAF5;
  --trait: #E8EBE6;
  --trait-fonce: #DDE1DB;
  --noir: #0A0A0A;
  --texte: #0F0F0F;
  --texte-2: #55595F;
  --texte-3: #686E77;
  --vert: #44B48E;
  /* Le vert de la marque ne contraste pas assez pour du texte (2,6:1) :
     les textes et traits fins utilisent ce vert plus sombre (4,9:1). */
  --vert-texte: #247E62;
  --menthe: #6DC4AE;
  --clair: #F5FFFD;
  --tms: #44B48E;
  --sommeil: #6C63FF;
  --challenge: #F97316;
  --colonne: 1440px;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, figure { margin: 0; }
/* Les attributs width et height poses au build reservent la place de l'image.
   Sans height:auto, ils imposeraient aussi sa hauteur reelle : les regles qui
   ont besoin d'une hauteur fixe (.media img) la redefinissent. */
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }

/* Clavier : un contour visible, le meme partout, jamais a la souris. */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--vert-texte); outline-offset: 3px; border-radius: 6px;
}
.saut {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 9999px; background: var(--noir); color: var(--clair);
  font-size: 14px; font-weight: 500; transition: top 0.2s ease;
}
.saut:focus { top: 12px; }

.container { max-width: var(--colonne); margin: 0 auto; }
.section { padding: 0 24px 140px; }
.centre { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* Typographie */
.eyebrow {
  font-family: "Roboto Mono", ui-monospace, Menlo, monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--vert-texte);
}
.eyebrow--gris { color: var(--texte-3); }
.eyebrow--menthe { color: var(--menthe); }

.t1 { font-size: clamp(38px, 6.4vw, 92px); line-height: 0.98; font-weight: 500; letter-spacing: -0.05em; text-wrap: balance; }
.t2 { font-size: clamp(30px, 4.2vw, 60px); line-height: 1.02; font-weight: 500; letter-spacing: -0.04em; text-wrap: balance; }
.t3 { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; font-weight: 500; letter-spacing: -0.04em; text-wrap: balance; }
.t4 { font-size: clamp(20px, 1.6vw, 26px); line-height: 1.15; font-weight: 500; letter-spacing: -0.03em; }
.chapo { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; color: var(--texte-2); text-wrap: pretty; }
.corps { font-size: 16px; line-height: 1.6; color: var(--texte-2); }
.petit { font-size: 14px; line-height: 1.55; color: var(--texte-3); }
.mono { font-family: "Roboto Mono", ui-monospace, Menlo, monospace; }

/* Navigation */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.nav.est-defile { border-bottom-color: var(--trait); }
.nav__barre {
  max-width: 1680px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; height: 68px; padding: 0 24px;
}
.nav__logo { height: 32px; width: auto; }
.nav__liens { display: flex; gap: 32px; align-items: center; justify-self: center; }
.nav__lien {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 500; color: var(--texte);
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit;
  transition: color 0.2s ease;
}
.nav__lien:hover, .nav__lien[aria-expanded="true"] { color: var(--vert-texte); }
.nav__lien.est-actif { color: var(--vert-texte); }
.nav__lien svg { transition: transform 0.25s var(--sortie); }
.nav__lien[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__droite { display: flex; gap: 10px; align-items: center; justify-self: end; }
.nav__burger { display: none; }

.panneau {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--ivoire); border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.28s var(--sortie), visibility 0.22s;
}
.panneau.est-ouvert { opacity: 1; visibility: visible; transform: none; }
.panneau__inner { max-width: 1200px; margin: 0 auto; padding: 36px 24px 40px; }
.panneau__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.panneau__grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.panneau__grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.panneau__carte {
  background: var(--blanc); border-radius: 18px; padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.3s var(--sortie);
}
.panneau__carte:hover { transform: translateY(-3px); }
.panneau__carte img { border-radius: 12px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.panneau__ligne { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.panneau__pied { display: flex; gap: 26px; align-items: center; margin-top: 22px; font-size: 14px; font-weight: 500; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 46px; padding: 0 24px; border-radius: 9999px;
  font-size: 15px; font-weight: 500; white-space: nowrap;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 0.2s var(--sortie), opacity 0.2s ease, background-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--noir { background: var(--noir); color: var(--clair); }
.btn--noir:hover { background: #1c1c1c; }
.btn--ghost { border-color: var(--trait); color: var(--texte); }
.btn--ghost:hover { border-color: var(--texte-3); }
.btn--menthe { background: var(--menthe); color: var(--noir); }
.btn--sm { height: 38px; padding: 0 18px; font-size: 13px; }
.lien-fleche { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; }
.lien-fleche svg { transition: transform 0.25s var(--sortie); }
.lien-fleche:hover { color: var(--vert-texte); }
.lien-fleche:hover svg { transform: translateX(3px); }

.puce {
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px;
  border-radius: 9999px; border: 1px solid var(--trait);
  font-size: 13px; font-weight: 500; gap: 6px;
  background: none; cursor: pointer; font-family: inherit; color: var(--texte);
}
.etiquette {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 10px; border-radius: 9999px; border: 1px solid var(--trait-fonce);
}
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Cartes et blocs */
.carte { background: var(--ivoire); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; gap: 16px; }
.bloc-noir { background: var(--noir); color: var(--clair); border-radius: 36px; padding: clamp(48px, 6vw, 96px) clamp(28px, 5vw, 80px); }
.bloc-ivoire { background: var(--ivoire); border-radius: 36px; padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 80px); }
/* Appel final : une bande pleine largeur, collee au pied de page. */
.bloc-vert {
  background: linear-gradient(135deg, var(--menthe) 0%, var(--vert) 100%);
  color: var(--noir);
  padding: clamp(64px, 7vw, 112px) 24px;
}
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grille-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.chiffre { font-size: clamp(56px, 6vw, 88px); font-weight: 500; letter-spacing: -0.055em; line-height: 0.9; color: var(--vert-texte); }
.media { border-radius: 28px; overflow: hidden; background: var(--ivoire); }
.media img { width: 100%; height: 100%; object-fit: cover; }

/* Icones d'application.
   Le masque est une superellipse, la forme des icones iOS. Le border-radius
   sert de repli : il est toujours legerement plus large que le masque,
   donc il ne rogne rien quand le masque fonctionne. */
.squircle {
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 23%;
  -webkit-mask-image: url(assets/squircle.svg);
  mask-image: url(assets/squircle.svg);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.grille-apps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ligne-app {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px; border-radius: 20px; border: 1px solid var(--trait);
  transition: border-color 0.25s ease, transform 0.3s var(--sortie);
}
.ligne-app:hover { border-color: var(--trait-fonce); transform: translateY(-2px); }
.bientot {
  font-family: "Roboto Mono", ui-monospace, monospace;
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 9999px;
  background: var(--ivoire); color: var(--texte-3); white-space: nowrap;
}

/* Ecrans d'application.
   .mockup : PNG detoure, le telephone est dans l'image.
   .ecran  : capture brute posee dans un cadre CSS qui imite le meme telephone. */
.mockup { width: 100%; max-width: 320px; height: auto; filter: drop-shadow(0 28px 44px rgba(10, 10, 10, 0.16)); }
.mockup--hero { max-width: 380px; }
.mockup--petit { max-width: 200px; filter: drop-shadow(0 16px 28px rgba(10, 10, 10, 0.14)); }
.ecran {
  width: 100%; max-width: 280px; padding: 10px;
  background: #0d0d0d; border-radius: 46px;
  box-shadow: 0 28px 44px rgba(10, 10, 10, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.ecran img { width: 100%; display: block; border-radius: 36px; }
.ecran--hero { max-width: 330px; }
.ecran--petit { max-width: 180px; padding: 7px; border-radius: 34px; }
.ecran--petit img { border-radius: 27px; }
/* Ecran de salle : capture affichee dans un cadre de television.
   Le pied est purement decoratif, d'ou la marge basse qui lui laisse la place. */
.tv {
  position: relative; width: 100%; margin: 0 0 18px; padding: clamp(9px, 1vw, 14px);
  background: #101214; border-radius: 16px;
  box-shadow: 0 26px 44px rgba(10, 10, 10, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.tv img, .tv video { width: 100%; display: block; border-radius: 7px; }
.tv::after {
  content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  width: 26%; height: 10px; background: #101214; border-radius: 0 0 10px 10px;
}
.tv--hero { max-width: 620px; }

.media--sombre { background: var(--noir); padding: clamp(14px, 2vw, 24px); border-radius: 24px; }
.media--sombre img { border-radius: 10px; }

/* Logos des clients : une ligne sobre, chaque logo sur fond blanc pour que
   les fichiers a fond blanc se fondent. */
.logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.logos__item {
  display: inline-flex; align-items: center; justify-content: center;
  width: 148px; height: 80px; padding: 0 18px; border-radius: 16px;
  background: var(--blanc); border: 1px solid var(--trait);
}
.logos__item img { max-height: 44px; max-width: 112px; width: auto; height: auto; object-fit: contain; }

/* Schemas SVG injectes dans la page : ils prennent la largeur disponible. */
.schema svg { width: 100%; height: auto; display: block; }

/* Frise de deploiement : cinq temps relies par une ligne. En colonne sur mobile. */
.frise {
  --accent: var(--challenge);
  position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px;
  list-style: none; padding: 0; margin: 0; counter-reset: etape;
}
.frise::before { content: ''; position: absolute; left: 20px; right: 20px; top: 19px; height: 2px; background: var(--trait-fonce); }
.frise__etape { position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 58px; }
.frise__etape::before {
  counter-increment: etape; content: counter(etape);
  position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--blanc); border: 2px solid var(--accent); color: var(--accent);
  font-weight: 600; font-size: 15px; display: grid; place-items: center;
}
.frise__etape--fort::before { background: var(--accent); color: var(--blanc); }
.frise__quand { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--vert-texte); }
.frise__etape h3 { font-size: 19px; font-weight: 500; letter-spacing: -0.02em; margin: 0; }

.grille-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

/* Rangees texte / visuel en alternance */
.rangee { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.rangee--inverse .rangee__texte { order: 2; }
.rangee--inverse .rangee__media { order: 1; }
.rangee__texte { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.rangee__media { display: flex; justify-content: center; align-items: center; min-height: 320px; }
.rangee__media .media { width: 100%; }

/* Bande sombre : trois chiffres, une ligne chacun */
.bande {
  background: var(--noir); color: var(--clair); border-radius: 32px;
  padding: clamp(36px, 4vw, 56px) clamp(28px, 4vw, 64px);
  display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center;
}
.bande__chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.bande__item { display: flex; flex-direction: column; gap: 6px; }
.bande__chiffre { font-size: clamp(44px, 4.6vw, 68px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.95; color: var(--menthe); }
.bande__libelle { font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }

/* Galerie d'ecrans qui defile a l'horizontale : alignee sur la colonne a
   gauche, elle deborde jusqu'au bord de l'ecran a droite. La section coupe
   ce debordement pour ne pas creer de defilement horizontal de la page. */
.section--galerie { overflow-x: clip; }
.galerie {
  display: flex; gap: 28px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 40px 24px 12px 0;
  margin-right: calc(-1 * max(24px, (100vw - 100%) / 2));
}
.galerie::-webkit-scrollbar { display: none; }
.galerie__item { flex: 0 0 236px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 0; }
.galerie__item .ecran { max-width: 236px; }

/* Ecosysteme : Challenge au centre, les autres autour, sur un anneau */
.ecosysteme { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.ecosysteme__anneau { position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed var(--trait-fonce); }
.ecosysteme__centre, .ecosysteme__satellite {
  position: absolute; display: block; transform: translate(-50%, -50%);
  transition: transform 0.3s var(--sortie);
}
.ecosysteme__centre { left: 50%; top: 50%; }
.ecosysteme__centre .squircle { box-shadow: 0 18px 36px rgba(10, 10, 10, 0.16); }
.ecosysteme__satellite .squircle { box-shadow: 0 10px 22px rgba(10, 10, 10, 0.12); }
.ecosysteme__satellite:hover { transform: translate(-50%, -50%) scale(1.06); }
.ecosysteme__satellite--hg { left: 24.5%; top: 24.5%; }
.ecosysteme__satellite--hd { left: 75.5%; top: 24.5%; }
.ecosysteme__satellite--bg { left: 24.5%; top: 75.5%; }
.ecosysteme__satellite--bd { left: 75.5%; top: 75.5%; }
.ecosysteme__satellite--h { left: 50%; top: 14%; }
.ecosysteme__satellite--bg3 { left: 18.8%; top: 68%; }
.ecosysteme__satellite--bd3 { left: 81.2%; top: 68%; }

/* Pages legales : sommaire a gauche, texte a droite */
.legal { display: grid; grid-template-columns: 280px 1fr; gap: 72px; align-items: start; }
.legal__aside { display: flex; flex-direction: column; gap: 26px; position: sticky; top: 96px; }
.legal__doc { display: block; padding: 10px 14px; border-radius: 10px; font-size: 15px; color: var(--texte-2); }
.legal__doc:hover { color: var(--texte); }
.legal__doc.est-actif { background: var(--ivoire); color: var(--texte); font-weight: 500; }
.legal__ancre { color: var(--texte-2); }
.legal__ancre:hover { color: var(--vert-texte); }
.legal__article { max-width: 760px; display: flex; flex-direction: column; gap: 40px; }
.legal__section { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 96px; }
.legal__p { font-size: 17px; line-height: 1.7; color: var(--texte-2); margin: 0; }
.legal__p a, .legal__liste a { text-decoration: underline; }
.legal__p code { font-family: "Roboto Mono", ui-monospace, monospace; font-size: 14px; background: var(--ivoire); padding: 2px 6px; border-radius: 6px; }
.legal__liste { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.6; color: var(--texte-2); }

/* Pastilles a choix unique du formulaire (« Vous etes »). L'etat coche
   vient du CSS quand :has est connu, et de la classe posee par site.js
   sinon : les deux disent la meme chose. */
.pastille {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px;
  border-radius: 9999px; border: 1px solid var(--trait-fonce);
  background: var(--blanc); color: var(--texte); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pastille input { position: absolute; opacity: 0; width: 0; height: 0; }
.pastille:hover { border-color: var(--noir); }
.pastille.est-choisi, .pastille:has(input:checked) { background: var(--noir); border-color: var(--noir); color: var(--clair); }
.pastille:has(input:focus-visible) { outline: 2px solid var(--vert-texte); outline-offset: 2px; }

/* Etat du formulaire de contact */
.formulaire__etat { font-size: 15px; line-height: 1.5; margin: 0; font-weight: 500; }
.formulaire__etat.est-succes { color: var(--vert-texte); }
.formulaire__etat.est-erreur { color: #B3261E; }

/* Envoi : une roue sur le bouton, le reste du formulaire attend. */
.est-envoi button[type="submit"] { pointer-events: none; }
.est-envoi button[type="submit"]::before {
  content: ''; width: 16px; height: 16px; margin-right: 10px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: formulaire-roue 0.7s linear infinite;
}
@keyframes formulaire-roue { to { transform: rotate(360deg); } }

/* Erreur : le formulaire tressaille une fois, le message s'affiche en rouge. */
.est-erreur { animation: formulaire-secousse 0.45s var(--sortie); }
@keyframes formulaire-secousse {
  10%, 50%, 90% { transform: translateX(-6px); }
  30%, 70% { transform: translateX(6px); }
}

/* Succes : les champs s'effacent, la coche se dessine, le message prend la place. */
/* Les champs portent des styles en ligne (display:flex, grid) : il faut forcer. */
.est-envoye > :not(.formulaire__succes) { display: none !important; }
.formulaire__succes {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  padding: 24px 0; outline: none;
  animation: formulaire-apparition 0.5s var(--sortie) both;
}
.formulaire__succes[hidden] { display: none; }
.formulaire__coche { fill: none; stroke: var(--vert-texte); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.formulaire__coche circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: formulaire-trace 0.6s var(--sortie) 0.1s forwards; }
.formulaire__coche path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: formulaire-trace 0.4s var(--sortie) 0.55s forwards; }
@keyframes formulaire-trace { to { stroke-dashoffset: 0; } }
@keyframes formulaire-apparition { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Blog : grille de cartes, puis l'article lui-meme */
.article-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }
.article-carte {
  display: flex; flex-direction: column; background: var(--ivoire); border-radius: 22px;
  overflow: hidden; transition: transform 0.3s var(--sortie);
}
.article-carte:hover { transform: translateY(-3px); }
.article-carte img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.article-carte__sansimage { display: block; aspect-ratio: 16 / 5; background: linear-gradient(135deg, var(--menthe) 0%, var(--vert) 100%); opacity: 0.22; }
.article-carte__corps { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 28px; flex: 1; }
.article-carte__meta { font-family: "Roboto Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-3); }

.article { display: flex; flex-direction: column; gap: 40px; }
.article__entete { max-width: 760px; }
.article__image { max-height: 460px; }
.article__image img { width: 100%; height: 100%; object-fit: cover; }
.article__colonnes { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.article__sommaire { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 10px; }
.article__sommaire nav { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.article__sommaire a { color: var(--texte-2); }
.article__sommaire a:hover { color: var(--vert-texte); }

/* Le corps de l'article : une seule colonne de lecture, rythme regulier. */
.article__corps { max-width: 720px; font-size: 18px; line-height: 1.7; color: var(--texte-2); }
.article__corps > * + * { margin-top: 20px; }
.article__corps h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; font-weight: 500; letter-spacing: -0.03em; color: var(--texte); margin-top: 48px; scroll-margin-top: 96px; }
.article__corps h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.02em; color: var(--texte); margin-top: 34px; scroll-margin-top: 96px; }
.article__corps strong { color: var(--texte); font-weight: 600; }
.article__corps ul, .article__corps ol { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.article__corps a { color: var(--vert-texte); text-decoration: underline; }
.article__corps blockquote { margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--menthe); color: var(--texte); }
.article__corps blockquote p { margin: 0; }
.article__corps code { font-family: "Roboto Mono", ui-monospace, monospace; font-size: 15px; background: var(--ivoire); padding: 2px 6px; border-radius: 6px; }
.article__corps hr { border: 0; border-top: 1px solid var(--trait); margin: 40px 0; }

/* Telechargement : le bouton de la plateforme du visiteur passe en premier. */
.stores {
  display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap;
  background: var(--ivoire); border-radius: 24px; padding: 32px 36px;
}
.stores__liens { display: flex; gap: 12px; flex-wrap: wrap; }
.store { gap: 10px; }
.store svg { flex-shrink: 0; }
.store--attente { background: none; border: 1px solid var(--trait-fonce); color: var(--texte-3); cursor: default; }
.store--attente:hover { transform: none; }
.stores__liens .store--secondaire { order: 2; background: none; border: 1px solid var(--trait-fonce); color: var(--texte); }

/* Modale de rendez-vous */
.rdv {
  width: min(100vw - 32px, 1040px); height: min(100vh - 32px, 820px);
  padding: 0; border: 0; border-radius: 28px; background: var(--blanc); color: var(--texte);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 40px 90px rgba(10, 10, 10, 0.28);
}
.rdv:not([open]) { display: none; }
/* Le fond ne defile plus tant que la boite est ouverte : etat porte par le DOM, pas par le script. */
body:has(.rdv[open]) { overflow: hidden; }
.rdv::backdrop { background: rgba(10, 10, 10, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rdv__tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px 28px 18px; border-bottom: 1px solid var(--trait); }
.rdv__titre { font-size: 22px; font-weight: 500; letter-spacing: -0.03em; margin: 0; }
.rdv__sous { font-size: 14px; color: var(--texte-2); margin: 4px 0 0; }
.rdv__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.rdv__onglet { font-size: 13px; color: var(--texte-2); text-decoration: underline; white-space: nowrap; }
.rdv__fermer { width: 40px; height: 40px; border-radius: 20px; border: 0; background: var(--ivoire); color: var(--texte); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rdv__fermer:hover { background: var(--trait); }
.rdv__corps { flex: 1; min-height: 0; background: var(--blanc); }
.rdv__corps iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Deux colonnes : texte d'un cote, visuel ou liste de l'autre. */
.duo { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; }
.duo--faq { grid-template-columns: 4fr 8fr; align-items: start; }
.duo--faq > :first-child { position: sticky; top: 96px; }

/* Questions frequentes : <details> natif, une seule ouverte a la fois
   grace a l'attribut name (sans lui, plusieurs restent ouvertes, ce
   qui n'est pas grave). */
.faq { border-top: 1px solid var(--trait); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; font-size: 19px; font-weight: 500; letter-spacing: -0.02em;
  transition: color 0.2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--vert-texte); }
.faq summary svg { flex-shrink: 0; color: var(--texte-3); transition: transform 0.3s var(--sortie); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq__reponse { padding: 0 48px 26px 0; max-width: 720px; font-size: 16px; line-height: 1.6; color: var(--texte-2); }
.faq details[open] .faq__reponse { animation: faq-entree 0.35s var(--sortie); }
@keyframes faq-entree { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Selecteur de langue */
.langue { position: relative; }
.langue__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
  min-width: 188px; padding: 6px;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px;
  box-shadow: 0 18px 40px rgba(10, 10, 10, 0.12);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.24s var(--sortie), visibility 0.18s;
}
.langue__menu.est-ouvert { opacity: 1; visibility: visible; transform: none; }
.langue__menu--haut { top: auto; bottom: calc(100% + 8px); right: 0; }
.langue__menu--gauche { left: 0; right: auto; }
.langue__choix {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 40px; padding: 0 12px;
  border: 0; border-radius: 11px; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--texte); text-align: left;
}
.langue__choix:hover { background: var(--ivoire); }
.langue__choix[aria-checked="true"] { font-weight: 500; }
.langue__coche { margin-left: auto; color: var(--vert-texte); opacity: 0; }
.langue__choix[aria-checked="true"] .langue__coche { opacity: 1; }

/* Mouvement : une montée à l'apparition, rien d'autre.
   Le contenu est visible par défaut. On ne le masque que si le JavaScript
   a pu poser la classe `js` sur <html> : sans lui, la page reste lisible. */
/* Un bloc pas encore revele est aussi visibility:hidden : invisible pour le
   clavier et les lecteurs d'ecran tant qu'il n'est pas a l'ecran. Ce qui est
   deja a l'ecran au chargement apparait sans fondu ; seul ce qui arrive en
   defilant est anime (classe .anime posee par le script). */
.js .reveal { opacity: 0; visibility: hidden; transform: translateY(28px); }
.js .reveal.est-vu { opacity: 1; visibility: visible; transform: none; }
.js .reveal.est-vu.anime { transition: opacity 0.9s ease, transform 1s var(--sortie); }

/* Pied de page */
.pied { background: var(--noir); color: var(--clair); padding: 72px 24px 0; overflow: hidden; }
.pied__grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; font-size: 14px; }
.pied__col { display: flex; flex-direction: column; gap: 12px; }
.pied__titre { font-family: "Roboto Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--menthe); }
.pied a:hover { color: var(--menthe); }
.pied__bas {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(245, 255, 253, 0.12);
  font-size: 12px; color: rgba(245, 255, 253, 0.5);
}
/* Signature de bas de page : le mot est entier, jamais rogne par le bas. */
.pied__signature {
  font-size: clamp(64px, 20vw, 280px); font-weight: 500; letter-spacing: -0.06em;
  line-height: 1; color: var(--menthe); text-align: center;
  margin-top: 36px; padding-bottom: 8px; white-space: nowrap;
}

/* Téléphone de démonstration */
.tel { background: var(--noir); border-radius: 44px; padding: 10px; box-shadow: 0 40px 80px rgba(10, 10, 10, 0.18); }
.tel__ecran { background: var(--blanc); border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; padding: 44px 16px 14px; gap: 14px; }

/* Menu mobile */
.tiroir {
  position: fixed; inset: 0; z-index: 80; background: var(--blanc);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity 0.25s ease, transform 0.35s var(--sortie), visibility 0.25s;
  overflow-y: auto;
}
.tiroir.est-ouvert { opacity: 1; visibility: visible; transform: none; }
.tiroir__lien {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 60px; font-size: 22px; font-weight: 500; letter-spacing: -0.025em;
  border-bottom: 1px solid #F0F2EE;
}
.tiroir__sous { display: none; flex-direction: column; gap: 2px; padding-bottom: 10px; }
.tiroir__sous.est-ouvert { display: flex; }
.tiroir__souslien { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 16px; color: var(--texte-2); }

@media (max-width: 1020px) {
  .frise { grid-template-columns: 1fr; gap: 30px; }
  .frise::before { left: 19px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .frise__etape { padding-top: 0; padding-left: 60px; }
  .grille-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav__liens, .nav__droite .langue, .nav__droite .btn { display: none; }
  .nav__burger { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 22px; background: var(--ivoire); border: 0; cursor: pointer; }
  .nav__barre { grid-template-columns: 1fr auto; }
  .grille-3, .grille-2, .grille-4, .duo, .duo--faq, .rangee, .bande { grid-template-columns: 1fr; }
  .duo { gap: 32px; }
  .rangee--inverse .rangee__texte { order: 1; }
  .rangee--inverse .rangee__media { order: 2; }
  .rangee__media { min-height: 0; }
  .bande__chiffres { grid-template-columns: 1fr; gap: 22px; }
  .galerie { padding-right: 20px; gap: 18px; margin-right: -20px; }
  .galerie__item { flex-basis: 196px; }
  .galerie__item .ecran { max-width: 196px; padding: 7px; border-radius: 36px; }
  .galerie__item .ecran img { border-radius: 29px; }
  .mockup--hero { max-width: 300px; }
  .ecran--hero { max-width: 270px; }
  .duo--faq > :first-child { position: static; }
  .article__colonnes { grid-template-columns: 1fr; gap: 28px; }
  .article__sommaire { position: static; }
  .article__corps { font-size: 17px; }
  .article-grille { grid-template-columns: 1fr; }
  .stores { flex-direction: column; align-items: flex-start; padding: 28px; }
  .stores__liens { width: 100%; }
  .stores__liens .store { width: 100%; }
  .rdv { width: 100vw; height: 100vh; max-width: none; max-height: none; border-radius: 0; }
  .rdv__onglet { display: none; }
  .legal { grid-template-columns: 1fr; gap: 40px; }
  .legal__aside { position: static; }
  /* Les mises en page a deux colonnes ecrites en ligne dans build.mjs
     passent aussi sur une colonne. Filet de securite, pas une regle. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .section { padding: 0 20px 88px; }
  .bloc-noir, .bloc-ivoire { border-radius: 28px; }
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .pied__bas { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .est-erreur, .formulaire__succes, .formulaire__coche circle, .formulaire__coche path, .est-envoi button[type="submit"]::before { animation: none; }
  .formulaire__coche circle, .formulaire__coche path { stroke-dashoffset: 0; }
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.est-vu { opacity: 1; visibility: visible; transform: none; transition: none; }
  .btn:hover, .panneau__carte:hover { transform: none; }
  * { animation: none !important; }
}