/* =========================================================
   ANDIAMO, feuille de style du site
   Rendu identique a la maquette a 1440 px de large.
   Les media queries n'agissent qu'en dessous de 1440 px.
   ========================================================= */

:root{
  --navy:#12263F;
  --navy-d:#0C1929;
  --amber:#E8833A;
  --amber-s:#FDF3EA;
  --blue:#2C5F8D;
  --paper:#F5F3EF;
  --line:#E3E0DA;
  --slate:#3A4A5C;
  --muted:#7A8794;

  /* gouttiere : 88px a 1440px, puis colonne de 1264px centree au-dela */
  --gut:max(88px, calc((100% - 1264px) / 2));
  --half:max(88px, calc(100% - 632px));   /* meme alignement dans une demi-colonne */
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:#fff;color:var(--slate);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%}
a{color:inherit}

.sec{position:relative;padding:96px var(--gut)}
.sec.tight{padding:74px var(--gut)}

/* ---------------- photos ---------------- */
.photo{position:relative;border-radius:10px;overflow:hidden;background:#ddd}
.photo::before{content:"";position:absolute;inset:0;
  background:
   radial-gradient(120% 90% at 22% 18%, rgba(255,236,205,.95) 0%, rgba(233,200,155,.55) 38%, rgba(0,0,0,0) 70%),
   radial-gradient(90% 80% at 82% 78%, rgba(44,95,141,.42) 0%, rgba(0,0,0,0) 62%),
   linear-gradient(135deg,#C9A882 0%,#8C7A66 42%,#3E4A57 100%);
}
.photo::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(122deg, rgba(255,255,255,.055) 0 2px, rgba(0,0,0,.045) 2px 5px);
  mix-blend-mode:overlay}
.photo.cool::before{background:
   radial-gradient(110% 90% at 78% 22%, rgba(255,241,220,.9) 0%, rgba(210,190,165,.4) 40%, rgba(0,0,0,0) 72%),
   linear-gradient(200deg,#A9B4BE 0%,#6E7C8A 45%,#2B3947 100%)}
.photo.warm2::before{background:
   radial-gradient(100% 85% at 35% 80%, rgba(255,226,186,.9) 0%, rgba(0,0,0,0) 65%),
   linear-gradient(160deg,#E0C29A 0%,#A38A6E 48%,#4A4238 100%)}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;display:block}

/* ---------------- NAV ---------------- */
.nav{background:var(--navy);padding:0 var(--gut);height:88px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:40}
.nav .logo{font-family:'Caveat',"Segoe Script","Brush Script MT",cursive;font-size:34px;font-weight:600;color:#fff;letter-spacing:.5px;text-decoration:none;line-height:1;display:flex;align-items:center;gap:11px}
/* La marque est calee sur la hauteur d oeil du mot, pas sur sa hauteur totale :
   le trace deborde en haut et en bas, l aligner sur la boite le ferait paraitre
   trop gros. Le leger decalage vers le haut compense la jambe du << Andiamo >>. */
.nav .mark{height:34px;width:auto;display:block;flex:none;position:relative;top:-1px}
.nav ul{display:flex;gap:34px;list-style:none;align-items:center}
.nav a{color:rgba(255,255,255,.82);text-decoration:none;font-size:14.5px;font-weight:500}
.nav a:hover{color:#fff}
.nav a.on{color:#fff;font-weight:700}
.burger{display:none;width:44px;height:44px;border:0;background:transparent;cursor:pointer;padding:10px;margin-right:-10px}
.burger span{display:block;height:2px;background:#fff;border-radius:2px}
.burger span+span{margin-top:5px}

.btn{display:inline-block;background:var(--amber);color:#fff;font-weight:700;font-size:14.5px;
  padding:13px 26px;border-radius:8px;text-decoration:none;letter-spacing:.1px;
  box-shadow:0 3px 0 rgba(0,0,0,.10);border:0;font-family:inherit;cursor:pointer;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px);box-shadow:0 2px 0 rgba(0,0,0,.10)}
.btn.lg{font-size:16.5px;padding:17px 34px}
.btn.gh{background:transparent;border:1.5px solid rgba(255,255,255,.42);color:#fff;box-shadow:none}
.btn.dk{background:var(--navy)}

/* ---------------- HERO ---------------- */
.hero{background:var(--paper);display:grid;grid-template-columns:1fr 1fr;min-height:600px}
.hero-l{padding:96px 60px 96px var(--half);display:flex;flex-direction:column;justify-content:center}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:2.6px;text-transform:uppercase;color:var(--amber);margin-bottom:22px}
h1{font-size:60px;line-height:1.04;letter-spacing:-1.9px;color:var(--navy);font-weight:800;text-wrap:balance}
.lede{font-size:21px;line-height:1.5;color:var(--blue);font-weight:600;margin-top:24px;max-width:520px}
.body{font-size:16.5px;line-height:1.68;color:var(--slate);margin-top:22px;max-width:520px}
.hero .cta{margin-top:36px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.link-b{color:var(--blue);font-weight:700;font-size:15.5px;text-decoration:none}
.link-b:hover{text-decoration:underline}
.hero-r{position:relative}

/* ---------------- PROBLEME ---------------- */
.problem{display:grid;grid-template-columns:1fr 1fr;background:#fff}
.problem-r{padding:96px var(--half) 96px 60px;display:flex;flex-direction:column;justify-content:center;position:relative}
h2{font-size:42px;line-height:1.12;letter-spacing:-1.2px;color:var(--navy);font-weight:800;text-wrap:balance}
h2.sm{font-size:34px;letter-spacing:-.8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;max-width:540px}
.chip{font-size:13px;font-weight:600;color:var(--slate);background:var(--paper);border:1px solid var(--line);padding:8px 13px;border-radius:6px}
.punch{margin-top:30px;font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.4px;border-left:4px solid var(--amber);padding-left:18px;line-height:1.4}

/* ---------------- CALL BRIEF ---------------- */
.cb{background:var(--navy);color:#fff;padding:92px var(--gut) 100px;position:relative}
.cb .head{text-align:center;max-width:760px;margin:0 auto 46px}
.cb h2{color:#fff}
.cb .sub{color:rgba(255,255,255,.72);font-size:17px;line-height:1.6;margin-top:18px}
.exlead{text-align:center;font-size:14.5px;font-weight:600;color:rgba(255,255,255,.72);margin:-18px 0 18px}

/* Trois entreprises, pas trois etiquettes : le nom porte, le metier explique. */
.exsel{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 22px}
.exsel button{display:flex;flex-direction:column;gap:3px;align-items:center;
  font-family:inherit;text-align:center;color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:14px;
  padding:12px 22px;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.exsel button b{font-size:14px;font-weight:800;letter-spacing:-.1px}
.exsel button span{font-size:11.5px;font-weight:500;opacity:.75}
.exsel button:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff}
.exsel button.on{background:#fff;color:var(--navy);border-color:#fff}
.exsel button.on span{opacity:.7}

/* La legende dit qui lit quoi. Elle change a chaque clic : c'est elle qui fait
   comprendre que chaque entreprise a son propre Andiamo. */
.excap{text-align:center;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.62);margin:18px auto 0;max-width:720px}
.excap b{color:#fff;font-weight:700}

/* la vraie application, encadree comme une fenetre de produit */
.appframe{border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.34);background:#fff;position:relative}
.appbar{display:flex;align-items:center;gap:14px;background:#0A1522;padding:11px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.appbar .dots{display:flex;gap:6px;flex:none}
.appbar .dots i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.16)}
.appbar .appwho{font-size:12px;font-weight:600;color:rgba(255,255,255,.55);letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar .appwho b{color:#fff}
.appbar .appsec{margin-left:auto;flex:none;font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--amber)}

/* La capture, et par-dessus les zones cliquables qui suivent la barre d'onglets. */
/* La capture EST une fenetre d application : hauteur d ecran, barre d onglets
   toujours visible. Rien ne defile ici : la version complete du panneau s ouvre
   a la loupe. */
.appshot{position:relative;background:#fff;line-height:0}
.appshot img{display:block;width:100%;height:auto}
.appshot .hots{position:absolute;inset:0}
.appshot .hots button{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;
  border-radius:6px 6px 0 0}
.appshot .hots .hot:hover{background:rgba(232,131,58,.10)}
.appshot .hots .hot:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
/* La loupe n existe qu en dessous de 880 px, ou la capture est illisible.
   Sur ordinateur, la seule chose cliquable est la barre d onglets : rien ne
   recouvre le contenu et rien ne fait quitter la page. */
.appzoom{display:none;position:absolute;inset:0;border:0;background:transparent;cursor:zoom-in}



/* Sous le cadre, uniquement sur petit ecran : la barre d onglets de la capture
   y devient trop fine pour le doigt. Sur ordinateur elle suffit, et un deuxieme
   jeu d onglets ferait doublon. */
.mobtabs{display:none;gap:6px;overflow-x:auto;background:#0A1522;padding:10px 12px;
  -webkit-overflow-scrolling:touch}
.mobtabs button{flex:none;font-family:inherit;font-size:12px;font-weight:700;white-space:nowrap;
  color:rgba(255,255,255,.7);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:9px 14px;cursor:pointer}
.mobtabs button.on{background:#fff;color:var(--navy);border-color:#fff}

/* Loupe plein ecran, pour les petits ecrans ou la capture devient illisible. */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(8,16,28,.94);display:none;overflow:auto;padding:14px}
.lightbox.open{display:block}
.lightbox img{width:1264px;max-width:none;display:block;margin:0 auto;border-radius:8px}
.lightbox button{position:fixed;top:14px;right:14px;z-index:81;background:var(--amber);color:#fff;border:0;
  font-family:inherit;font-size:13px;font-weight:700;padding:10px 16px;border-radius:8px;cursor:pointer}
.brief{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.34);display:flex}
.brief[hidden]{display:none}
.brief-rail{width:216px;flex:none;background:#FAF9F6;border-right:1px solid var(--line);padding:18px 0}
.rail-inner{position:sticky;top:24px}
.ri{display:flex;gap:11px;align-items:center;padding:9px 20px;font-size:12.5px;color:var(--slate);font-weight:600;
  width:100%;border:0;background:transparent;font-family:inherit;text-align:left;cursor:pointer;
  box-shadow:inset 3px 0 0 transparent;transition:background .15s,color .15s,box-shadow .15s}
.ri .n{font-size:10px;color:var(--amber);font-weight:800;width:16px}
.ri:hover{background:#fff;color:var(--navy)}
.ri.on{background:#fff;color:var(--navy);font-weight:800;box-shadow:inset 3px 0 0 var(--amber)}
.brief-body{flex:1;padding:22px 26px 26px;min-width:0}
.bhead{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.bhead h3{font-size:20px;color:var(--navy);font-weight:800;letter-spacing:-.5px}
.bhead .desc{font-size:12px;color:var(--muted);margin-top:5px}
.lens{text-align:right;max-width:320px;flex:none}
.lens b{display:block;font-size:9px;letter-spacing:1.4px;text-transform:uppercase;color:var(--amber);font-weight:800;margin-bottom:5px}
.lens p{font-size:11.5px;color:var(--slate);line-height:1.5}
.lens p em{font-style:normal;font-weight:700;color:var(--navy)}
.bh{display:flex;align-items:center;gap:9px;margin:0 0 9px}
.bh .num{font-size:9.5px;font-weight:800;color:var(--amber);letter-spacing:1.3px}
.bh .t{font-size:10.5px;font-weight:800;color:var(--navy);letter-spacing:1.8px;text-transform:uppercase}
.bh .r{flex:1;height:1px;background:var(--line)}
.bsec{margin-bottom:18px;scroll-margin-top:90px}
.bsec:last-child{margin:0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{border:1px solid var(--line);border-radius:8px;padding:13px 15px;background:#fff}
.card h4{font-size:13px;color:var(--navy);font-weight:700;margin-bottom:5px;line-height:1.35}
.card p{font-size:12px;color:var(--slate);line-height:1.55}
.facts{display:flex;flex-wrap:wrap;gap:7px}
.fact{font-size:11.5px;color:var(--slate);background:#F3F1EC;border:1px solid var(--line);border-radius:5px;padding:5px 10px}
.fact b{color:var(--navy)}
.ev{display:flex;gap:9px;padding:8px 0;border-bottom:1px dashed var(--line)}
.ev:last-child{border:0}
.dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;margin-top:5px}
.ev p{font-size:12px;line-height:1.5;color:var(--slate)}
.ev span{display:block;font-size:10.5px;color:var(--muted);margin-top:3px}
.sigl{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:10px 13px;background:#fff}
.sigl+.sigl{margin-top:8px}
.sigl .lb{flex:none;font-size:8.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;padding:4px 8px;border-radius:4px;margin-top:1px}
.sigl .lb.now{background:var(--amber);color:#fff}
.sigl .lb.hire{background:var(--navy);color:#fff}
.sigl p{font-size:12px;color:var(--slate);line-height:1.45}
.q{display:flex;gap:10px;padding:8px 0}
.q+.q{border-top:1px solid var(--line)}
.q i{flex:none;width:20px;height:20px;border-radius:50%;background:var(--navy);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;font-style:normal}
.q p{font-size:12.5px;color:var(--slate);line-height:1.45}
.open{border-left:3px solid var(--amber);background:var(--amber-s);border-radius:0 8px 8px 0;padding:13px 16px}
.open b{display:block;font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.open p{font-size:13px;color:var(--navy);font-style:italic;line-height:1.6}
.cb .after{text-align:center;margin-top:34px;font-size:15px;color:rgba(255,255,255,.66)}
.cb .after b{color:#fff}

/* ---------------- DIFFERENCE ---------------- */
.diff{background:var(--paper)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:38px}
.cmp .box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px 30px}
.cmp .box.hl{background:var(--navy);border-color:var(--navy);color:#fff}
.cmp .lbl{font-size:10.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.cmp .box.hl .lbl{color:var(--amber)}
.cmp p{font-size:19px;line-height:1.5;color:var(--slate);font-weight:500}
.cmp .box.hl p{color:#fff}

/* ---------------- CHAINE ---------------- */
.chain{background:#fff}
.mods{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;margin-top:40px}
.mod{border:1px solid var(--line);border-radius:12px;padding:28px 26px 30px;position:relative;background:#fff}
.mod.now{border-color:var(--amber);box-shadow:0 8px 30px rgba(232,131,58,.14)}
.mod .step{font-size:10.5px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted)}
.mod h3{font-size:23px;color:var(--navy);font-weight:800;margin-top:12px;letter-spacing:-.4px}
.mod h3 em{font-style:normal;color:var(--amber)}
.mod p{font-size:14px;line-height:1.6;margin-top:12px;color:var(--slate)}
.pill{position:absolute;top:22px;right:22px;font-size:9.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;padding:5px 9px;border-radius:20px;background:#EEF1F4;color:var(--muted)}
.pill.a{background:var(--amber);color:#fff}
.chainline{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:44px;font-size:26px;font-weight:800;color:var(--navy);letter-spacing:-.5px}
.chainline span{color:var(--amber)}

/* ---------------- BESPOKE ---------------- */
.bespoke{background:var(--blue);color:#fff;text-align:center}
.bespoke h2{color:#fff;max-width:900px;margin:0 auto}
.bespoke p{color:rgba(255,255,255,.82);font-size:17.5px;line-height:1.65;max-width:720px;margin:22px auto 0}
.bespoke .fin{margin-top:30px;font-size:21px;font-weight:800;color:#fff}
.bespoke .fin em{font-style:normal;color:#FFD9B8}

/* ---------------- POUR QUI ---------------- */
.who{display:grid;grid-template-columns:1fr 1fr;background:var(--paper)}
.who-r{padding:96px var(--half) 96px 60px;display:flex;flex-direction:column;justify-content:center;position:relative}
.checks{margin-top:26px;display:flex;flex-direction:column;gap:12px;max-width:520px}
.ck{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--slate);line-height:1.5}
.ck i{flex:none;width:19px;height:19px;border-radius:50%;background:var(--amber);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;margin-top:2px}

/* ---------------- QUATRE CHOSES ---------------- */
.four{background:#fff;text-align:center}
.four .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.fc{border:1px solid var(--line);border-radius:12px;padding:30px 22px 32px;text-align:left;background:#fff;position:relative}
.fc .no{width:34px;height:34px;border-radius:9px;background:var(--navy);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.fc h4{font-size:17px;color:var(--navy);font-weight:800;letter-spacing:-.2px}
.fc p{font-size:13.5px;line-height:1.55;margin-top:9px;color:var(--slate)}
.four .fin{margin-top:36px;font-size:17px;color:var(--slate)}
.four .fin b{color:var(--navy)}

/* ---------------- LIVRAISON ---------------- */
.deliv{background:var(--paper)}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:46px;position:relative}
.steps::before{content:"";position:absolute;top:19px;left:8%;right:8%;height:2px;background:var(--line)}
.st{text-align:center;padding:0 12px;position:relative}
.st .dotn{width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--amber);color:var(--navy);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;position:relative;z-index:2}
.st h4{font-size:16px;color:var(--navy);font-weight:800}
.st p{font-size:13px;line-height:1.55;margin-top:8px;color:var(--slate)}

/* ---------------- VALEUR TEMPS ---------------- */
.time{background:var(--amber-s);text-align:center;border-top:1px solid #F0DCC7;border-bottom:1px solid #F0DCC7}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px;text-align:left}
.stat{background:#fff;border:1px solid #EFDECA;border-radius:12px;padding:26px 26px 22px;display:flex;flex-direction:column}
.stat .v{font-size:38px;font-weight:800;color:var(--navy);letter-spacing:-1.4px;line-height:1.05}
.stat .l{font-size:14.5px;line-height:1.55;color:var(--slate);margin-top:12px;flex:1}
/* Une seule mention pour les trois tuiles. Elle nomme l enquete et distingue
   l estimation interne, ce qui est le minimum pour que le chiffre du milieu ne
   se lise pas comme une donnee d etude. */
.statnote{margin-top:22px;font-size:12px;line-height:1.6;color:var(--muted);max-width:720px;
  margin-left:auto;margin-right:auto}
/* La troisieme colonne est notre propre estimation, pas une etude : elle porte
   l'accent de la marque et le dit dans sa source. */
.stat.hl{background:var(--navy);border-color:var(--navy)}
.stat.hl .v{color:#fff}
.stat.hl .l{color:rgba(255,255,255,.86)}
.time .ask{margin-top:34px;font-size:19px;font-weight:700;color:var(--navy);line-height:1.5}

/* ---------------- PRIX ---------------- */
.price{background:#fff;display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.ptag{font-size:64px;font-weight:800;color:var(--navy);letter-spacing:-2.4px;line-height:1.05}
.ptag span{font-size:22px;color:var(--muted);font-weight:600;letter-spacing:0}
.incl{display:grid;grid-template-columns:1fr 1fr;gap:11px 26px;margin-top:8px}
.incl div{font-size:14.5px;color:var(--slate);display:flex;gap:9px;align-items:center}
.incl i{color:var(--amber);font-style:normal;font-weight:800}

/* ---------------- FINAL + PIED ---------------- */
.final{background:var(--navy);color:#fff;text-align:center;padding:104px var(--gut) 110px;position:relative}
.final h2{color:#fff;font-size:50px;letter-spacing:-1.5px}
.final p{color:rgba(255,255,255,.74);font-size:18px;margin-top:20px;line-height:1.6}
.final .row{margin-top:26px;font-size:15px;color:rgba(255,255,255,.6);letter-spacing:.3px}
.final .btn{margin-top:34px}
.final .closing{margin-top:40px;font-size:20px;color:#fff;font-weight:600}
.foot{background:var(--navy-d);color:rgba(255,255,255,.5);padding:34px var(--gut);display:flex;justify-content:space-between;gap:24px;font-size:13px;flex-wrap:wrap}
.foot a{color:rgba(255,255,255,.5);text-decoration:none}
.foot a:hover{color:#fff}

/* ---------------- pages interieures ---------------- */
.ph{background:var(--navy);color:#fff;padding:86px var(--gut) 90px}
.ph .eyebrow{color:var(--amber)}
.ph h1{color:#fff;font-size:52px;max-width:900px;letter-spacing:-1.6px}
.ph p{color:rgba(255,255,255,.76);font-size:18px;line-height:1.65;margin-top:22px;max-width:720px}
.prose{max-width:720px}
.prose p{font-size:16.5px;line-height:1.75;color:var(--slate);margin-top:20px}
.prose p:first-child{margin-top:0}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.badge{font-size:14px;font-weight:600;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px}
.form{max-width:640px;margin-top:36px;display:flex;flex-direction:column;gap:20px}
.field label{display:block;font-size:12.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy);margin-bottom:8px}
.field .hint{display:block;font-size:13.5px;color:var(--muted);margin-bottom:9px;letter-spacing:0;text-transform:none;font-weight:400}
.field input,.field textarea{width:100%;font-family:inherit;font-size:16px;color:var(--slate);
  border:1px solid var(--line);border-radius:8px;padding:13px 15px;background:#fff}
.field input:focus,.field textarea:focus{outline:2px solid var(--amber);outline-offset:-1px;border-color:var(--amber)}
.field textarea{min-height:110px;resize:vertical}
.formnote{font-size:13.5px;color:var(--muted);line-height:1.6}
.formnote a{color:var(--blue);font-weight:600}

/* =========================================================
   RESPONSIVE, n'intervient qu'en dessous de 1440 px
   ========================================================= */
@media (max-width:1240px){
  :root{--gut:56px;--half:56px}
  h1{font-size:52px;letter-spacing:-1.5px}
  h2{font-size:37px;letter-spacing:-1px}
  .final h2{font-size:44px}
  .hero-l{padding:80px 40px 80px var(--half)}
  .problem-r,.who-r{padding:80px var(--half) 80px 40px}
  .four .cards{grid-template-columns:repeat(2,1fr)}
  .stats{gap:14px}
  .lens{max-width:260px}
}
@media (max-width:1040px){
  .nav ul{position:absolute;top:88px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-d);padding:8px 0 18px;display:none;box-shadow:0 24px 40px rgba(0,0,0,.28)}
  .nav ul.open{display:flex}
  .nav ul li{padding:0 var(--gut)}
  .nav ul li a{display:block;padding:14px 0;font-size:16px;border-bottom:1px solid rgba(255,255,255,.08)}
  .nav ul li a.btn{border:0;text-align:center;margin-top:14px;padding:15px 26px}
  .burger{display:block}
  .mods{grid-template-columns:1fr;gap:16px}
  .chainline{font-size:22px;gap:12px}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .steps::before{display:none}
  .price{grid-template-columns:1fr;gap:34px}
  .cmp{grid-template-columns:1fr}
  .brief-rail{width:186px}
  .ri{font-size:11.5px;padding:9px 14px}
}
@media (max-width:880px){
  .hero,.problem,.who{grid-template-columns:1fr}
  .hero-l{padding:64px var(--gut) 56px;order:2}
  .hero-r{order:1;min-height:320px}
  .problem>.photo,.who>.photo{min-height:320px !important;order:1}
  .problem-r,.who-r{padding:64px var(--gut) 70px;order:2}
  .sec{padding:70px var(--gut)}
  .sec.tight{padding:60px var(--gut)}
  .cb{padding:70px var(--gut) 76px}
  .final{padding:78px var(--gut) 84px}
  .brief{display:block}
  .brief-rail{width:auto;border-right:0;border-bottom:1px solid var(--line);padding:10px 6px;
    display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rail-inner{position:static;display:flex;gap:2px}
  .ri{width:auto;white-space:nowrap;box-shadow:none;border-radius:6px;padding:8px 12px}
  .ri.on{box-shadow:inset 0 -3px 0 var(--amber)}
  .bhead{flex-direction:column;gap:14px}
  .lens{text-align:left;max-width:none}
  .g2{grid-template-columns:1fr}
  .appzoom{display:block}
  .appshot .hots .hot{display:none}
  .mobtabs{display:flex}
  .ph h1{font-size:40px;letter-spacing:-1.2px}
}
@media (max-width:620px){
  :root{--gut:22px;--half:22px}
  h1{font-size:36px;letter-spacing:-1px}
  h2,.ph h1{font-size:29px;letter-spacing:-.6px}
  h2.sm{font-size:26px}
  .final h2{font-size:32px;letter-spacing:-.8px}
  .lede{font-size:18.5px}
  .body,.prose p{font-size:16px}
  .nav .logo{font-size:29px;gap:9px}
  .nav .mark{height:29px}
  .nav{height:76px}
  .nav ul{top:76px}
  .four .cards,.steps{grid-template-columns:1fr}
  .four .cards{gap:14px}
  .steps{gap:26px}
  .stats{grid-template-columns:1fr;gap:14px}
  .stat .v{font-size:32px}
  .ptag{font-size:44px;letter-spacing:-1.6px}
  .incl{grid-template-columns:1fr}
  .punch{font-size:19px}
  .cmp p{font-size:17px}
  .chainline{font-size:19px}
  .foot{flex-direction:column;gap:10px;text-align:left}
  .btn.lg{font-size:15.5px;padding:15px 26px}
  .brief{border-radius:10px}
  .brief-body{padding:18px 16px 20px}
  .appbar .appsec{font-size:10px;letter-spacing:1px}
}

/* ---------------- selecteur de langue ---------------- */
/* Un <details> : aucun JavaScript, donc il fonctionne meme si le script ne
   charge pas, et le clavier le pilote nativement. */
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:.6px;
  color:rgba(255,255,255,.82);padding:6px 10px;border:1px solid rgba(255,255,255,.28);border-radius:6px}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{color:#fff;border-color:rgba(255,255,255,.55)}
.lang[open] summary{color:#fff;border-color:#fff}
.langmenu{position:absolute;top:calc(100% + 8px);right:0;z-index:50;min-width:190px;
  background:#fff;border-radius:10px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.langmenu a{display:block;padding:9px 12px;border-radius:6px;font-size:14px;font-weight:500;
  color:var(--slate);text-decoration:none}
.langmenu a:hover{background:var(--paper);color:var(--navy)}
.langmenu a.on{font-weight:800;color:var(--navy)}
@media (max-width:1040px){
  .lang{margin:10px 0}
  .langmenu{position:static;box-shadow:none;padding:4px 0;background:transparent}
  .langmenu a{color:rgba(255,255,255,.82);padding:10px 0}
  .langmenu a:hover{background:transparent;color:#fff}
  .langmenu a.on{color:#fff}
}

/* ---------------- COUPURES DE LIGNE ----------------
   Les titres sont equilibres par le navigateur plutot que remplis ligne par
   ligne : sans cela un mot court se retrouve seul en fin de ligne, et le cas
   change avec la langue. Les paragraphes interdisent le mot orphelin en
   derniere ligne. Les navigateurs qui ne connaissent pas ces valeurs les
   ignorent, le texte reste lisible. */
h3,h4,.punch,.ask,.lede,.stat b,.excap{text-wrap:balance}
/* Chaque phrase d un titre est une boite : le navigateur prefere passer la
   phrase entiere a la ligne plutot que de la couper apres son premier mot. */
.sen{display:inline-block}
p,.body,.statnote,.exlead{text-wrap:pretty}

/* ---------------- PAGE LEGALE ----------------
   Une colonne de lecture, pas une mise en page : ce sont des mentions, on les
   consulte. Le bloc d identite de l editeur est le seul endroit du site ou du
   texte reste a completer avant publication, il est donc signale. */
.legal{padding:70px var(--gut) 90px;max-width:820px}
.legal h2{margin-top:46px}
.legal h2:first-child{margin-top:0}
.legal p{font-size:16.5px;line-height:1.68;color:var(--slate);margin-top:16px}
.legal a{color:var(--blue);font-weight:600}
.legalid{display:grid;grid-template-columns:230px 1fr;gap:10px 22px;margin-top:20px;font-size:15.5px}
.legalid dt{color:var(--navy);font-weight:700}
.legalid dd{margin:0;color:var(--slate)}
.legalid dd.todo{color:#9a3412;background:#fff7ed;border:1px dashed #fdba74;
  border-radius:6px;padding:3px 10px;font-weight:600}
.legallist{margin:16px 0 0 20px;font-size:16.5px;line-height:1.68;color:var(--slate)}
.legallist li{margin-top:9px}
.legaldate{margin-top:44px;font-size:13.5px;color:var(--blue);opacity:.75}
@media (max-width:700px){
  .legalid{grid-template-columns:1fr;gap:2px 0}
  .legalid dd{margin-bottom:12px}
}