/* Wewe apps — shared styles. Nautical palette matching the We Boat app. */
:root{
  --navy:#0E2A47; --ocean:#14507A; --ocean-2:#1E6FA6;
  --sand:#F2BF4D; --sand-deep:#E0A92C;
  --ink:#16222E; --muted:#5B6B7A; --line:#E4EAF0;
  --bg:#F6F9FC; --card:#FFFFFF; --sky:#EAF3FB;
  --maxw:1080px; --radius:16px;
  --shadow:0 8px 30px rgba(14,42,71,.08);
  font-synthesis:none;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--ocean-2); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* Header */
.site-header{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; gap:18px; min-height:62px; flex-wrap:wrap; row-gap:6px}
/* ⚠️ `height` FIXE + `flex-wrap:nowrap` était la cause : à 1000 px la marque passait sur deux
   lignes DANS une barre de 62 px (mesuré : marque 58 px de haut), et le sélecteur de langue
   était rogné. Le point de rupture qui masque les liens était à 560 px alors que le
   débordement commence vers 1060 : entre les deux, six liens + la marque + sept pastilles de
   langue (264 px à elles seules) se disputaient la place. */
.brand{white-space:nowrap; flex:0 0 auto}
.langsel{display:flex; flex-wrap:wrap; justify-content:flex-end}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--navy); font-size:18px}
.brand .dot{width:42px;height:42px;border-radius:11px;
  background:url(/img/icon-192.png?v=3) center/cover no-repeat; display:inline-block}
.nav .spacer{flex:1}
.nav a.navlink{color:var(--navy); font-weight:600; font-size:15px}
.nav a.navlink:hover{color:var(--ocean-2); text-decoration:none}

/* Language selector (EN · FR) */
.langsel{display:inline-flex; align-items:center; gap:2px; border:1px solid var(--line);
  border-radius:999px; padding:3px; background:#fff}
.langsel a{font-size:13px; font-weight:700; color:var(--muted); padding:3px 9px;
  border-radius:999px; line-height:1}
.langsel a:hover{text-decoration:none; color:var(--ocean-2)}
.langsel a.on{background:var(--navy); color:#fff}

/* Hero */
.hero{background:linear-gradient(160deg,var(--navy),var(--ocean) 70%,var(--ocean-2));
  color:#fff; padding:72px 0 84px; position:relative; overflow:hidden}
.hero::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:46px;
  background:var(--bg); clip-path:polygon(0 100%,100% 100%,100% 0,75% 60%,50% 10%,25% 60%,0 0)}
.hero h1{font-size:clamp(30px,5vw,48px); line-height:1.1; margin:.2em 0 .3em; font-weight:850}
.hero p{font-size:clamp(16px,2.4vw,20px); max-width:660px; color:#D9E6F2; margin:0 auto}
.hero .wrap{text-align:center; position:relative; z-index:2}
.eyebrow{display:inline-block; letter-spacing:.14em; text-transform:uppercase; font-size:12px;
  font-weight:700; color:var(--sand); background:rgba(242,191,77,.14);
  padding:6px 12px; border-radius:999px}

/* Buttons */
.btn{display:inline-block; font-weight:700; border-radius:12px; padding:12px 20px; cursor:pointer;
  border:1px solid transparent; transition:transform .06s ease, box-shadow .2s ease}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--sand),var(--sand-deep)); color:#3a2a00;
  box-shadow:0 6px 18px rgba(224,169,44,.35)}
.btn-ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.4)}
.btn-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}

/* App Store badge button */
.btn-store{display:inline-flex; align-items:center; gap:10px; background:#000; color:#fff;
  border-radius:13px; padding:10px 18px; font-weight:700}
.btn-store:hover{text-decoration:none; transform:translateY(-1px)}
.btn-store .apple,.btn-store .play{display:inline-flex; align-items:center; line-height:0}
/* 2e rangée : liens secondaires, resserrés sous les boutons de store */
.btn-row+.btn-row{margin-top:12px}
.btn-store small{display:block; font-size:10px; font-weight:600; opacity:.8; letter-spacing:.04em;
  text-transform:uppercase; line-height:1.1}
.btn-store b{display:block; font-size:17px; font-weight:800; line-height:1.1}
.btn-store.disabled{background:#3a4654; cursor:default; opacity:.65; pointer-events:none}

/* Sections & cards */
section{padding:54px 0}
.section-title{font-size:clamp(22px,3.4vw,30px); font-weight:800; color:var(--navy); margin:0 0 6px}
.section-sub{color:var(--muted); margin:0 0 28px; max-width:640px}
.grid{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow)}
.card h3{margin:.1em 0 .3em; color:var(--navy); font-size:20px}
.card .pill{font-size:12px; font-weight:700; color:var(--ocean); background:var(--sky);
  padding:4px 10px; border-radius:999px; display:inline-block; margin-bottom:8px}
.card .muted{color:var(--muted)}
.applogo{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;
  font-size:28px; margin-bottom:12px}
.lg-boat{background:linear-gradient(135deg,#1E6FA6,#0E2A47)}
.lg-blocks{background:linear-gradient(135deg,#7C5CFF,#3CC6C0)}
/* Real app-icon variants — rendered as proper rounded app icons */
.applogo.icon{background:none;width:56px;height:56px;border-radius:14px;overflow:hidden;
  box-shadow:0 4px 12px rgba(14,42,71,.18); border:1px solid rgba(14,42,71,.08)}
.applogo.icon img{width:56px;height:56px;border-radius:14px;object-fit:cover;display:block}
.hero-icon{width:88px;height:88px;border-radius:21px;object-fit:cover;display:block;
  margin:0 auto 14px; box-shadow:0 12px 34px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.18)}
.soon{opacity:.7}
.badge-soon{font-size:11px;font-weight:700;color:#7a611a;background:#FBEFC9;
  padding:3px 8px;border-radius:999px;margin-left:8px}

/* Content (legal / sources) */
.doc{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; box-shadow:var(--shadow); margin-top:24px}
.doc h2{color:var(--navy); margin-top:1.6em; font-size:22px}
.doc h3{color:var(--navy); margin-top:1.2em; font-size:17px}
.doc table{width:100%; border-collapse:collapse; margin:14px 0; font-size:14px}
.doc th,.doc td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top}
.doc th{background:var(--sky); color:var(--navy)}
.doc code{background:var(--sky); padding:1px 6px; border-radius:6px; font-size:.92em}
.note{background:var(--sky); border-left:4px solid var(--ocean-2); padding:14px 16px;
  border-radius:10px; margin:18px 0; color:#22425e}
.ok{color:#1b7a3d; font-weight:700}
.lede{font-size:18px; color:var(--muted)}
.crumb{color:var(--muted); font-size:14px; margin-top:18px}

/* Screenshot gallery */
.shots{display:flex; gap:22px; overflow-x:auto; padding:10px 2px 22px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.shot{flex:0 0 auto; width:222px; scroll-snap-align:center; text-align:center}
.shot img{width:222px; height:auto; border-radius:26px; display:block;
  box-shadow:0 16px 40px rgba(14,42,71,.22); border:1px solid var(--line); background:#0E2A47}
.shot figcaption{margin-top:13px; font-size:13.5px; color:var(--muted); font-weight:600; line-height:1.45}
/* Rail horizontal — la mécanique de `.shots`, appliquée aux cartes.
   Ajouté le 2026-08-26 : quatre apps empilées faisaient une page d'accueil très longue,
   surtout sur téléphone. MODIFICATEUR, pas une modification de `.grid` : la grille sert
   sur une vingtaine de pages et doit rester une grille partout ailleurs.
   Le défilement n'apparaît que s'il est nécessaire (`overflow-x:auto`), et le RTL est
   géré par l'attribut `dir` sans règle propre — comme la galerie arabe de We Boat. */
.grid.rail{display:flex; grid-template-columns:none; gap:20px; overflow-x:auto;
  padding:4px 2px 18px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin}
.grid.rail>.card{flex:0 0 300px; scroll-snap-align:center}
@media (max-width:640px){.grid.rail>.card{flex-basis:84%}}
.shots-hint{color:var(--muted); font-size:13px; margin:-8px 0 0}

/* Highlight band */
.band{background:var(--sky); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 28px; box-shadow:var(--shadow)}
.band h3{margin:.1em 0 .4em; color:var(--navy); font-size:21px}
.flags{font-size:15px; font-weight:700; color:var(--ocean); margin-top:6px}

/* Work-with-us — CTA band + contact form */
/* .wrap zeroes out section vertical padding, so give the CTA section its own
   breathing room above and below (longhands override the .wrap shorthand). */
.cta-section{padding-top:40px; padding-bottom:40px}
.cta-band{background:linear-gradient(160deg,var(--navy),var(--ocean) 75%,var(--ocean-2));
  color:#fff; border-radius:var(--radius); padding:34px 32px; box-shadow:var(--shadow);
  display:flex; gap:24px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.cta-band h3{margin:0 0 6px; font-size:23px; color:#fff}
.cta-band p{margin:0; color:#D9E6F2; max-width:560px}
.cta-band .btn-primary{white-space:nowrap}

.form{display:grid; gap:16px; margin-top:6px; position:relative}
.form .row{display:grid; gap:16px; grid-template-columns:1fr 1fr}
@media (max-width:560px){ .form .row{grid-template-columns:1fr} }
.field{display:grid; gap:6px}
.field label{font-size:13.5px; font-weight:700; color:var(--navy)}
.field .req{color:var(--sand-deep)}
.field input,.field select,.field textarea{
  font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line);
  border-radius:12px; padding:11px 13px; width:100%;
  transition:border-color .15s ease, box-shadow .15s ease}
.field textarea{min-height:130px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--ocean-2); box-shadow:0 0 0 3px rgba(30,111,166,.15)}
.hp{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden}
.cf-turnstile{margin:2px 0}
.form-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px}
.form-status{font-size:14px; font-weight:600; min-height:1.2em; margin:0}
.form-status.ok{color:#1b7a3d}
.form-status.err{color:#b3261e}
.form-status.sending{color:var(--muted)}
.form-note{font-size:13px; color:var(--muted); margin-top:8px}
.feature-list{list-style:none; padding:0; margin:0 0 4px; display:grid; gap:10px}
.feature-list li{padding-left:28px; position:relative; color:var(--muted)}
.feature-list li::before{content:"✓"; position:absolute; left:0; top:0; color:#1b7a3d; font-weight:800}

/* Footer */
.site-footer{background:var(--navy); color:#C7D6E5; padding:40px 0; margin-top:72px}
.site-footer a{color:#fff}
.foot-grid{display:flex; gap:30px; flex-wrap:wrap; justify-content:space-between}
.site-footer .small{font-size:13px; color:#8DA6C0; margin-top:18px}
.foot-links{display:flex; gap:16px; flex-wrap:wrap}
@media (max-width:1060px){ .nav a.navlink{display:none} .nav a.navlink.always{display:inline} }
/* Sous 560 px, la marque (84 px) + le lien conservé (77) + le sélecteur (264) font déjà 569 px :
   le sélecteur passe à la ligne et ses pastilles se resserrent. Aucun lien n'est SUPPRIMÉ — le
   pied de page les porte tous. */
/* 🔴 L'en-tête est `position:sticky`. Un premier essai posait le sélecteur sur sa propre
   ligne pleine largeur : la barre montait à 110 px et les gardait à l'écran en permanence,
   soit 16 % d'un écran de 700 px. Pire que le défaut d'origine. On laisse donc le flex
   décider du repli, en resserrant les pastilles pour que le tout tienne en deux lignes. */
@media (max-width:560px){
  /* ⚠️ `padding:6px 0` écrasait le `padding:0 20px` de `.wrap` (la nav EST le wrap) :
     le dernier lien venait toucher le bord de l'écran. Les 20 px sont conservés. */
  .nav{gap:8px; row-gap:2px; min-height:0; padding:6px 20px}
  /* Le `spacer` (`flex:1`) prenait une ligne entière en arabe : 110 px de barre COLLANTE.
     Il n'a plus d'objet dès que la nav se replie — on le retire sous ce seuil. */
  .nav .spacer{display:none}
  .langsel{padding:2px; flex:0 0 auto; margin-left:auto}
  html[dir="rtl"] .langsel{margin-left:0; margin-right:auto}
  .langsel a{padding:2px 6px; font-size:12px}
}

/* ==== Design v2 (2026-09-23), validé par Werner sur la maquette ; fusionné depuis design-v2.css ==== */
/* Maquette design v2 (branche design/maquette-we-boat) : chargée APRÈS styles.css,
   par fr/we-boat.html seulement. Rien ici ne touche les autres pages. Si la direction est
   validée, ce fichier fusionne dans styles.css et le balisage est porté page par page. */

/* 1. Une couleur d'accent par app, posée sur <body>. Le studio reste neutre. */
:root{--accent:var(--ocean-2); --accent-soft:#E6F0FA; --accent-ink:var(--navy);
  --hero-a:#0B2340; --hero-b:#14507A}
body.app-boat{--accent:#1E6FA6; --accent-soft:#E6F0FA; --accent-ink:#0E2A47;
  --hero-a:#0B2340; --hero-b:#16527D}
body.app-ibd{--accent:#2A9D8F; --accent-soft:#E3F4F1; --accent-ink:#134E48;
  --hero-a:#0F3B3A; --hero-b:#1F6F68}
body.app-math{--accent:#6C4CE0; --accent-soft:#EEEAFD; --accent-ink:#2E1D73;
  --hero-a:#2A1766; --hero-b:#5B3FD1}
body.app-blocks{--accent:#E2546B; --accent-soft:#FDECEF; --accent-ink:#5B1623;
  --hero-a:#3B1D5C; --hero-b:#2F7E9E}

/* 2. Typographie : plus de contraste entre titres et texte, sans police web. */
h1,h2,h3{letter-spacing:-.02em}
.section-title{font-size:clamp(26px,3.6vw,36px); font-weight:800; line-height:1.15; margin-bottom:10px}
.section-sub{font-size:17px}
.card h3{font-size:18px; font-weight:700}
.kicker{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-bottom:8px}

/* 3. Boutons en aplat, sans ombre colorée. */
.btn-primary{background:var(--sand); color:#2b1f00; box-shadow:none}
.btn-primary:hover{background:var(--sand-deep)}
.btn:hover,.btn-store:hover{transform:none}

/* 4. Cartes : une bordure OU une ombre, pas les deux. */
.card{box-shadow:none; border:1px solid var(--line); border-radius:14px; transition:border-color .15s}
a.card:hover,.card:has(h3 a):hover{border-color:var(--accent)}

/* 5. En-tête : sélecteur de langue compact + menu mobile, sans JS (<details>). */
.nav{flex-wrap:nowrap}
.lang{position:relative}
.lang summary,.menu summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:6px;
  font-size:14px; font-weight:700; color:var(--navy); padding:6px 10px; border:1px solid var(--line);
  border-radius:999px; background:#fff}
.lang summary::-webkit-details-marker,.menu summary::-webkit-details-marker{display:none}
.lang[open] summary,.menu[open] summary{border-color:var(--accent)}
.lang .pop,.menu .pop{position:absolute; top:calc(100% + 8px); right:0; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:6px; min-width:150px;
  box-shadow:0 12px 30px rgba(14,42,71,.14); display:grid; z-index:30}
html[dir="rtl"] .lang .pop,html[dir="rtl"] .menu .pop{right:auto; left:0}
.lang .pop a,.menu .pop a{padding:8px 12px; border-radius:8px; color:var(--navy); font-weight:600; font-size:15px}
.lang .pop a:hover,.menu .pop a:hover{background:var(--accent-soft); text-decoration:none}
.lang .pop a.on{background:var(--navy); color:#fff}
.menu{display:none; position:relative}
@media (max-width:1060px){ .menu{display:block} }
@media (max-width:560px){ .nav{padding:8px 20px; min-height:56px} .nav .spacer{display:block} }

/* 6. Hero produit : texte à gauche, téléphone à droite, CTA visibles sans défiler. */
.hero2{background:linear-gradient(150deg,var(--hero-a),var(--hero-b)); color:#fff; padding:64px 0 0;
  overflow:hidden}
.hero2 .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:end}
.hero2 .copy{padding-bottom:64px}
.app-badge{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:15px;
  color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  padding:6px 14px 6px 6px; border-radius:999px}
.app-badge img{width:30px; height:30px; border-radius:8px; display:block}
.hero2 h1{font-size:clamp(34px,5vw,56px); line-height:1.05; font-weight:850; margin:18px 0 16px}
.hero2 .lede{font-size:clamp(17px,2vw,20px); color:#D6E4F1; max-width:520px; margin:0 0 26px}
.hero2 .btn-row{justify-content:flex-start; margin-top:0}
.hero2 .links{margin-top:18px; font-size:14px; color:#A9C1D8}
.hero2 .links a{color:#D6E4F1; text-decoration:underline; text-underline-offset:3px}
.phones{position:relative; height:470px}
.phone{position:absolute; bottom:-40px; width:250px; border-radius:36px; border:8px solid #0A1B2E;
  box-shadow:0 30px 60px rgba(0,0,0,.35); background:#0A1B2E}
.phone img{display:block; width:100%; height:auto; border-radius:28px}
.phone.front{right:40px; z-index:2}
.phone.back{right:230px; bottom:-90px; transform:rotate(-6deg); opacity:.9; width:220px}
html[dir="rtl"] .phone.front{right:auto; left:40px}
html[dir="rtl"] .phone.back{right:auto; left:230px; transform:rotate(6deg)}
@media (max-width:860px){
  .hero2{padding-top:36px}
  .hero2 .wrap{grid-template-columns:1fr; gap:0}
  .hero2 .copy{padding-bottom:28px}
  .phones{height:300px}
  .phone{width:190px; bottom:-120px}
  .phone.front{right:50%; transform:translateX(50%)}
  .phone.back{display:none}
}

/* 7. Bande de chiffres clés. */
.stats{display:grid; grid-template-columns:repeat(5,1fr); gap:0; background:#fff;
  border:1px solid var(--line); border-radius:16px; overflow:hidden}
.stat{padding:22px 18px; border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
html[dir="rtl"] .stat{border-left:0; border-right:1px solid var(--line)}
html[dir="rtl"] .stat:first-child{border-right:0}
.stat b{display:block; font-size:32px; line-height:1; font-weight:850; color:var(--accent-ink);
  letter-spacing:-.03em}
.stat span{display:block; margin-top:8px; font-size:14px; color:var(--muted); line-height:1.35}
@media (max-width:760px){ .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:0; border-top:1px solid var(--line)} .stat:nth-child(-n+2){border-top:0}
  .stat:nth-child(even){border-left:1px solid var(--line)} .stat:last-child{grid-column:1/-1} }

/* 8. Rythme : sections teintées pleine largeur, et blocs image + texte en zigzag. */
.tint{background:var(--accent-soft)}
.tint > .wrap{padding-top:8px; padding-bottom:8px}
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.split.rev .split-media{order:2}
html[dir="rtl"] .split.rev .split-media{order:0}
.split-media{display:flex; justify-content:center}
.split-media .phone{position:static; width:260px}
.split ul{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:14px}
.split li{display:grid; grid-template-columns:36px 1fr; gap:12px; align-items:start; color:var(--muted)}
.split li b{color:var(--navy); display:block}
@media (max-width:860px){ .split{grid-template-columns:1fr; gap:28px} .split.rev .split-media{order:0} }

/* 9. Icônes des cartes de fonctionnalités. */
.ico{width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); margin-bottom:12px}
.split li .ico{margin:0}
.ico svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}

/* 10. Offre : une bande d'accent plutôt qu'une carte de plus. */
.offer{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:center;
  background:var(--navy); color:#D6E4F1; border-radius:18px; padding:32px}
.offer h3{color:#fff; font-size:24px; margin:0 0 8px}
.offer p{margin:0}
.offer strong{color:#fff}
.offer .price{text-align:center; background:rgba(255,255,255,.08); border-radius:14px; padding:18px 24px}
.offer .price b{display:block; font-size:30px; color:#fff; letter-spacing:-.02em}
.offer .price span{font-size:13px}
@media (max-width:760px){ .offer{grid-template-columns:1fr} }
/* Le <span class="langsel"> reste tel quel (hreflang.py le lit et le réécrit) : il devient
   simplement le contenu du menu déroulant. */
.lang .pop .langsel{display:grid; gap:2px; border:0; padding:0; background:none; border-radius:0}
.lang .pop .langsel a{font-size:15px; padding:8px 12px; border-radius:8px; color:var(--navy); line-height:1.2}
.lang .pop .langsel a.on{background:var(--navy); color:#fff}
@media (max-width:560px){ .lang .pop .langsel a{padding:8px 12px; font-size:15px} }
/* `.wrap` remet à zéro le padding vertical des <section> : la bande de chiffres se collait au hero. */
.stats-wrap{padding-top:36px}
/* Même cause : sans marge verticale, les sections se touchaient (offre, sources, fiches). */
section.wrap{padding-top:36px; padding-bottom:36px}
.ico{width:40px; height:40px} .ico svg{width:22px; height:22px}
/* Sous 560 px le lien « Travaillons ensemble » passait sur deux lignes : il est dans le menu. */
@media (max-width:560px){ .nav a.navlink.always{display:none} }
.menu .pop{min-width:220px} .menu .pop a{white-space:nowrap}
.lang .pop .langsel{justify-content:stretch} .lang .pop{min-width:96px}

/* 11. Variante « hero clair » (We IBD) : une app de santé se présente calme et lumineuse,
   pas en marine nautique. Les visuels de la fiche App Store y sont posés tels quels. */
.hero2.light{background:linear-gradient(160deg,#F1FAF8,#D9F0EB); color:var(--accent-ink)}
.hero2.light h1{color:var(--accent-ink)}
.hero2.light .lede{color:#35605B}
.hero2.light .app-badge{color:var(--accent-ink); background:#fff; border-color:#CFE7E2}
.hero2.light .links{color:#5E7F7B}
.hero2.light .links a{color:var(--accent-ink)}
.hero-art{display:flex; justify-content:center; align-self:end}
.hero-art img{display:block; width:100%; max-width:430px; height:auto; margin-bottom:-4px}
@media (max-width:860px){ .hero-art img{max-width:300px} }
.split-media img.art{display:block; width:100%; max-width:340px; height:auto; border-radius:22px;
  box-shadow:0 20px 44px rgba(15,59,58,.16)}
.shots .shot img.art{border-radius:22px; background:none}

/* La bande de chiffres accepte 4 ou 5 cases. */
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (max-width:760px){ .stat:last-child{grid-column:auto} .stat:last-child:nth-child(odd){grid-column:1/-1} }
body.app-ibd .band{background:var(--accent-soft)}
/* Le visuel de fiche a son propre fond : on en fond les bords dans le hero au lieu d'un rectangle. */
.hero2.light .hero-art img{-webkit-mask-image:radial-gradient(ellipse 72% 70% at 55% 55%,#000 62%,transparent 100%);
  mask-image:radial-gradient(ellipse 72% 70% at 55% 55%,#000 62%,transparent 100%)}
/* L'essai fondateur se lit comme une lettre : colonne étroite, texte plus grand. */
#story{max-width:760px; margin:0 auto; background:#fff; padding:44px 48px; border-color:#DCEDE9}
#story h3{font-size:28px; letter-spacing:-.02em; margin-bottom:18px}
#story p{font-size:17.5px; line-height:1.75; color:#2B3D3B}
@media (max-width:560px){ #story{padding:28px 22px} #story p{font-size:16.5px} }
.hero2.light .hero-art img{-webkit-mask-image:radial-gradient(ellipse 60% 62% at 52% 50%,#000 58%,transparent 100%);
  mask-image:radial-gradient(ellipse 60% 62% at 52% 50%,#000 58%,transparent 100%)}
/* Les titres prennent l'encre de l'app (marine pour We Permis Bateau, vert profond pour We IBD). */
.section-title,.card h3,.band h3,#story h3,.split li b{color:var(--accent-ink)}

/* 12. En-tête et pied de page aux couleurs de l'app (retour de Werner : le pied restait marine,
   l'en-tête aussi, au-dessus d'un hero vert clair). --foot = la teinte la plus sombre de l'app. */
body.app-boat{--foot:#0E2A47; --foot-muted:#8DA6C0}
body.app-ibd{--foot:#0F3B3A; --foot-muted:#8FBDB6}
body.app-math{--foot:#2A1766; --foot-muted:#B3A6E8}
body.app-blocks{--foot:#3B1D5C; --foot-muted:#C3A9DE}
.site-footer{background:var(--foot,var(--navy))}
.site-footer .small{color:var(--foot-muted,#8DA6C0)}
.site-header .brand,.nav a.navlink,.lang summary,.menu summary{color:var(--accent-ink)}
.nav a.navlink:hover{color:var(--accent)}
.hero2.light ~ * .brand{color:inherit}
body.app-ibd .site-header{background:rgba(241,250,248,.9); border-bottom-color:#D7ECE7}
body.app-ibd .lang summary,body.app-ibd .menu summary{border-color:#CFE7E2}
.lang .pop .langsel a.on{background:var(--accent-ink)}
/* Bandeau cookies : injecté par analytics.js (#ww-cc, spécificité 1-0-0). `body #ww-cc` (1-0-1)
   l'emporte sans toucher au script. Bouton d'acceptation assez foncé pour un texte blanc lisible. */
body.app-boat{--btn:#1E6FA6} body.app-ibd{--btn:#1F7A70} body.app-math{--btn:#5B3FD1} body.app-blocks{--btn:#C23B55}
body #ww-cc{background:var(--foot,#0E2A47)}
body #ww-cc .ww-cc-accept{background:var(--btn,#2f80ed)}

/* 13. Hero clair paramétrable (We IBD, We Math) : les couleurs viennent de l'app. */
body.app-ibd{--light-a:#F1FAF8; --light-b:#D9F0EB; --light-lede:#35605B; --light-line:#CFE7E2; --head-bg:rgba(241,250,248,.9)}
body.app-math{--light-a:#F6F3FF; --light-b:#E2DAFF; --light-lede:#4B3E7A; --light-line:#DCD3FB; --head-bg:rgba(246,243,255,.9);
  --btn:#5B3FD1}
body.app-blocks{--accent:#3E6BE6; --accent-soft:#EBF0FD; --accent-ink:#1B2340; --hero-a:#141827; --hero-b:#2A3152;
  --foot:#141827; --foot-muted:#9AA6C9; --btn:#3E6BE6}
body.app-drone{--accent:#2F86D6; --accent-soft:#E7F2FC; --accent-ink:#0F2C4A; --hero-a:#0A1A2F; --hero-b:#1B4A78;
  --foot:#0A1A2F; --foot-muted:#8FB1D3; --btn:#2F78C2}
.hero2.light{background:linear-gradient(160deg,var(--light-a),var(--light-b))}
.hero2.light .lede{color:var(--light-lede)}
.hero2.light .app-badge{border-color:var(--light-line)}
body.app-ibd .site-header,body.app-math .site-header{background:var(--head-bg); border-bottom-color:var(--light-line)}
body.app-math .lang summary,body.app-math .menu summary{border-color:var(--light-line)}
/* Hero sombre de jeu : quatre carrés de couleur de l'icône, en décor. */
body.app-blocks .hero2{background:radial-gradient(circle at 85% 20%,rgba(62,107,230,.35),transparent 45%),
  radial-gradient(circle at 70% 90%,rgba(242,191,77,.22),transparent 40%),linear-gradient(150deg,var(--hero-a),var(--hero-b))}
.hero2 .flags-line{margin-top:10px; font-size:13.5px; opacity:.85}

/* 14. Accueil du studio : neutre et chaud (le jaune du logo), pour ne ressembler à aucune app. */
body.studio{--accent:#B8860B; --accent-soft:#FBF4E4; --accent-ink:#16222E; --foot:#16222E; --foot-muted:#A7B1BD;
  --light-a:#FFFCF5; --light-b:#F5EBD6; --light-lede:#4A5563; --light-line:#EADFC6; --btn:#16222E}
body.studio .site-header{background:rgba(255,252,245,.9); border-bottom-color:var(--light-line)}
.hero2.light .btn-ghost{color:var(--accent-ink); border-color:var(--light-line); background:#fff}
.hero2 .btn-row .btn{margin:0}
.app-stack{display:grid; grid-template-columns:repeat(3,96px); gap:22px; justify-content:center;
  align-self:center; padding:40px 0 70px; transform:rotate(-6deg)}
.app-stack img{width:96px; height:96px; border-radius:24px; display:block; box-shadow:0 14px 30px rgba(22,34,46,.18)}
.app-stack img:nth-child(2){transform:translateY(-26px)} .app-stack img:nth-child(5){transform:translateY(-26px)}
@media (max-width:860px){ .app-stack{grid-template-columns:repeat(5,56px); gap:12px; padding:0 0 36px; transform:none}
  .app-stack img{width:56px; height:56px; border-radius:14px} .app-stack img:nth-child(n){transform:none} }
/* Cartes d'apps : grille sur ordinateur (le rail reste sur mobile), liseré et bouton à la couleur de l'app. */
@media (min-width:861px){ body.studio .grid.rail{display:grid; grid-template-columns:repeat(3,1fr); overflow:visible}
  body.studio .grid.rail>.card{flex:none} body.studio .shots-hint{display:none} }
body.studio .grid.rail>.card{display:flex; flex-direction:column; border-top:4px solid var(--c)}
body.studio .grid.rail>.card>p:last-of-type{margin-top:auto !important; padding-top:14px}
body.studio .grid.rail .btn-primary{background:var(--c); color:#fff}
.c-boat{--c:#1E6FA6} .c-ibd{--c:#1F7A70} .c-math{--c:#5B3FD1} .c-blocks{--c:#3E6BE6} .c-drone{--c:#2F78C2}

/* 15. Correctifs de revue. */
/* Accueil : le bouton « Accepter » avait la couleur du fond du bandeau. */
body.studio #ww-cc .ww-cc-accept{background:var(--sand); color:#2b1f00}
/* La règle auto-fit (§ 11) venait après la règle mobile et l'annulait : 3 colonnes serrées à 500 px. */
@media (max-width:760px){ .stats{grid-template-columns:repeat(2,1fr)} }
/* We Drone : hero clair bleu ciel, sinon il se confondait avec le marine de We Permis Bateau. */
body.app-drone{--light-a:#F3F9FF; --light-b:#DCEBFA; --light-lede:#34506E; --light-line:#CFE0F3; --head-bg:rgba(243,249,255,.9)}
body.app-drone .site-header{background:var(--head-bg); border-bottom-color:var(--light-line)}
body.app-drone .lang summary,body.app-drone .menu summary{border-color:var(--light-line)}
/* Retour de Werner : la lettre « Pourquoi j'ai créé We IBD » était trop étroite (760 px).
   Le bloc prend toute la largeur ; le texte garde une ligne lisible (900 px, ~95 caractères). */
#story{max-width:none; padding:48px 56px}
#story p{max-width:900px}
@media (max-width:560px){ #story{padding:28px 22px} }

/* 16. En-tête réduit à « Applis · Travaillons ensemble · Contact » + langue (retour de Werner).
   Trois liens tiennent jusqu'à 700 px : on ne les masque plus dès 1060 px, le menu ne sert qu'en dessous. */
@media (max-width:1060px){ .nav a.navlink{display:inline} .menu{display:none} }
@media (max-width:700px){ .nav a.navlink{display:none} .menu{display:block} }

/* 17. « Applis » en menu déroulant (retour de Werner). Ouverture au survol ET au clavier
   (:focus-within), sans JS, fermeture automatique. Sur mobile, la liste est dans le menu ≡. */
.dd{position:relative}
.dd-btn{display:inline-flex !important; align-items:center; gap:4px}
.dd .pop{display:none; position:absolute; top:100%; left:-12px; padding:8px; margin-top:0; min-width:240px;
  background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 30px rgba(14,42,71,.14); z-index:30}
.dd::after{content:""; position:absolute; left:0; right:0; top:100%; height:10px}  /* pont de survol */
.dd:hover .pop,.dd:focus-within .pop{display:grid; top:calc(100% + 10px)}
html[dir="rtl"] .dd .pop{left:auto; right:-12px}
.dd .pop a,.menu .pop a{display:flex; align-items:center; gap:10px}
.dd .pop a{padding:8px 10px; border-radius:8px; color:var(--accent-ink); font-weight:600; font-size:15px; white-space:nowrap}
.dd .pop a:hover{background:var(--accent-soft); text-decoration:none}
.dd .pop img,.menu .pop img{width:22px; height:22px; border-radius:6px}
.dd .pop .dd-all{border-top:1px solid var(--line); border-radius:0 0 8px 8px; margin-top:4px; font-size:14px; color:var(--muted)}
.menu .pop hr{border:0; border-top:1px solid var(--line); margin:6px 0}
.menu .pop .pop-label{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:6px 12px 2px}
@media (max-width:700px){ .dd{display:none} }

/* 18. Accueil : le bloc « Besoin d'une appli ? » gardait le dégradé marine d'avant (retour de Werner).
   Il prend l'encre du pied de page et un halo jaune du logo ; « Pourquoi Wewe apps ? » passe sur le crème. */
body.studio .cta-band{background:radial-gradient(circle at 88% 30%,rgba(242,191,77,.28),transparent 45%),#16222E;
  box-shadow:none; border-radius:18px; padding:40px}
body.studio .cta-band h3{font-size:26px; letter-spacing:-.02em}
body.studio .cta-band p{color:#C9D1DA}
body.studio .cta-section + section .card{background:var(--accent-soft); border-color:var(--light-line); padding:32px}
body.studio .cta-section + section .card .muted{color:#4A5563}
body.studio .cta-section + section .card h3{font-size:22px}
body.studio #apps{padding-bottom:12px}

/* 19. Page About (maquette FR) : médaillon en attendant une photo, questions en grille de cartes. */
.portrait{align-self:center; justify-self:center; width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,#F5EBD6); border:8px solid #fff;
  box-shadow:0 24px 50px rgba(22,34,46,.14); display:grid; place-items:center; margin:36px 0 56px}
.portrait span{font-size:72px; font-weight:850; letter-spacing:-.04em; color:#C9A24A}
@media (max-width:860px){ .portrait{width:150px; height:150px; margin:0 0 32px; border-width:6px} .portrait span{font-size:44px} }
.qa-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:18px}
.qa-grid .qa{padding:26px 28px}
.qa-grid .qa h3{font-size:19px; margin-bottom:10px}
.qa-grid .qa p{color:#3F4A57; line-height:1.7; margin:0 0 10px}
.qa-grid .qa-large{grid-column:1/-1}
.qa-note{margin-top:22px; background:#fff; border-left-color:#C9A24A}
@media (max-width:760px){ .qa-grid{grid-template-columns:1fr} }

/* 20. About : la frise des applications remplace le médaillon (Werner ne veut pas de photo).
   Dates = date de sortie App Store (lookup Apple), raisons = ses propres réponses. */
.parcours{align-self:center; background:#fff; border:1px solid var(--light-line,#EADFC6); border-radius:20px;
  padding:26px 28px; box-shadow:0 24px 50px rgba(22,34,46,.10); margin:36px 0 56px; max-width:420px; width:100%; justify-self:end}
.parcours-titre{display:block; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#9A7A2E; margin-bottom:14px}
.parcours ol{list-style:none; margin:0; padding:0; position:relative}
.parcours ol::before{content:""; position:absolute; top:22px; bottom:22px; left:21px; width:2px; background:#EFE3C8}
html[dir="rtl"] .parcours ol::before{left:auto; right:21px}
.parcours li a{display:flex; align-items:center; gap:14px; padding:7px 0; color:var(--accent-ink); position:relative}
.parcours li a:hover{text-decoration:none}
.parcours li a:hover b{color:#9A7A2E}
.parcours li img{width:44px; height:44px; border-radius:12px; box-shadow:0 4px 12px rgba(22,34,46,.14); background:#fff}
.parcours li b{display:block; font-size:16px}
.parcours li small{display:block; font-size:13px; color:var(--muted)}
@media (max-width:860px){ .parcours{margin:0 0 32px; justify-self:stretch; max-width:none} }

/* 21. We Color Blocks hors FR : ses seules captures sont en français, le hero montre donc un
   décor de blocs aux couleurs de l'icône plutôt qu'une interface dans une autre langue. */
.blocks-art{display:grid; grid-template-columns:repeat(4,64px); gap:12px; justify-content:center; align-self:center;
  padding:30px 0 60px; transform:rotate(-8deg)}
.blocks-art i{width:64px; height:64px; border-radius:16px; display:block; box-shadow:0 10px 24px rgba(0,0,0,.25)}
.blocks-art .b0{background:transparent; border:3px solid rgba(255,255,255,.18); box-shadow:none}
.blocks-art .b1{background:#3E7BF0} .blocks-art .b2{background:#FFD21F} .blocks-art .b3{background:#EF4638}
@media (max-width:860px){ .blocks-art{grid-template-columns:repeat(4,40px); gap:8px; padding:0 0 32px}
  .blocks-art i{width:40px; height:40px; border-radius:10px} }

/* 22. « Travaillons ensemble » : le formulaire, mis en avant sur le fond crème du studio. */
.form-card{border-top:4px solid var(--sand); box-shadow:0 20px 44px rgba(22,34,46,.10); padding:30px}
body.studio .feature-list li::before{color:#9A7A2E}
body.studio .tint .grid{align-items:start}

/* 23. Champ piège anti-robots (.hp) : il était repoussé à left:-9999px. Sur une page RTL, ce
   décalage élargissait le document à ~11 000 px et le navigateur affichait une zone VIDE :
   `ar/work-with-us` était blanche pour tout visiteur, avant même le design v2 (vérifié sur
   l'ancienne version). Masqué sur place désormais, rien ne déborde. */
.hp{left:0; top:0; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; opacity:0; pointer-events:none}

/* 24. Sur téléphone, 11 pages débordaient de l'écran (sources, fiches, méthodologie DE) : toujours un
   tableau. Il défile désormais dans son propre cadre au lieu d'élargir la page. */
@media (max-width:640px){ section table{display:block; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch} }

/* 25. Accueil FR/NL : la liste des fiches, pour que Google les découvre depuis une page qu'il indexe déjà. */
.guides{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:10px}
.guides a{display:block; padding:14px 16px 14px 40px; background:#fff; border:1px solid var(--line); border-radius:12px;
  color:var(--accent-ink); font-weight:600; position:relative}
.guides a::before{content:"→"; position:absolute; left:16px; color:var(--accent,#1E6FA6)}
html[dir="rtl"] .guides a{padding:14px 40px 14px 16px} html[dir="rtl"] .guides a::before{left:auto; right:16px; content:"←"}
.guides a:hover{text-decoration:none; border-color:var(--accent,#1E6FA6)}