/* ==========================================================================
   WeCartTogether — feuille de style unique du site officiel

   L'identité vient de l'application, pas d'ailleurs : les jetons ci-dessous
   sont repris de `lib/theme.dart`, à la valeur près.

     --brand          #FF8A00   kBrandOrange
     --brand-fonce    #E67700   kBrandOrangeHover
     --brand-doux     #FFF3E6   kBrandOrangeSoft
     --sur-brand      #3A1D00   kBrandOnOrange  (5,97:1 sur l'orange)
     --brand-texte    #8A4A00   scheme.brandOnSurface

   ⚠️ Règle héritée de l'application, et payée deux fois : l'orange de marque
   en TEXTE sur fond clair ne fait que 2,4:1. Il ne sert donc jamais à écrire —
   ni sur fond clair, ni sur fond orange. Pour du texte on prend
   `--brand-texte` ; sur un aplat orange on écrit en `--sur-brand`.

   Aucune police distante, aucun script tiers, aucune requête sortante : le
   site doit s'afficher entièrement hors ligne une fois chargé, et ne poser
   aucun cookie.
   ========================================================================== */

/* --- Jetons ------------------------------------------------------------- */

:root {
  --brand: #FF8A00;
  --brand-fonce: #E67700;
  --brand-doux: #FFF3E6;
  --sur-brand: #3A1D00;
  --brand-texte: #8A4A00;

  --fond: #FFFBF7;
  --fond-carte: #FFFFFF;
  --fond-doux: #FBF4EC;
  --texte: #241B12;
  --texte-doux: #6B5B4C;
  --bordure: #EADFD3;
  --ombre: 0 1px 2px rgba(58, 29, 0, .05), 0 8px 24px rgba(58, 29, 0, .05);

  /* Grille de 4, comme `Gaps` dans l'application. */
  --e1: .25rem; --e2: .5rem;  --e3: .75rem; --e4: 1rem;
  --e6: 1.5rem; --e8: 2rem;   --e12: 3rem;  --e16: 4rem; --e24: 6rem;

  /* `Corners` : champ 12 < carte 16 < tuile 20 < feuille 28. */
  --r-champ: 12px; --r-carte: 16px; --r-tuile: 20px; --r-feuille: 28px;

  --t-rapide: 150ms cubic-bezier(.2, 0, 0, 1);
  --t-moyen: 250ms cubic-bezier(.2, 0, 0, 1);

  --largeur: 68rem;
  --largeur-texte: 44rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand: #FFA733;
    --brand-doux: #2A1C0C;
    --brand-texte: #FFC98A;
    --fond: #14100C;
    --fond-carte: #1D1813;
    --fond-doux: #221C16;
    --texte: #F2EAE2;
    --texte-doux: #B5A596;
    --bordure: #33291F;
    --ombre: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

/* --- Base --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 1.0625rem;      /* 17 px : lisible sur un téléphone au soleil */
  line-height: 1.65;
  /* Aucun débordement horizontal, jamais — y compris sur un long identifiant
     technique ou une adresse e-mail dans un tableau étroit. */
  overflow-wrap: break-word;
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; margin: 0 0 var(--e4); }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 4vw, 2.125rem); font-weight: 750; margin-top: var(--e12); }
h3 { font-size: 1.1875rem; font-weight: 700; margin-top: var(--e8); }
p  { margin: 0 0 var(--e4); }

a { color: var(--brand-texte); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brand-fonce); }
@media (prefers-color-scheme: dark) { a:hover { color: #FFD9AC; } }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: var(--e1);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--fond-doux);
  border: 1px solid var(--bordure);
  border-radius: 6px;
  padding: .1em .38em;
}

img { max-width: 100%; height: auto; }

.contenu {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--e5, 1.25rem);
}
@media (min-width: 48rem) { .contenu { padding-inline: var(--e8); } }

/* Accès clavier : premier élément focalisable de la page. */
.saut {
  position: absolute; left: -9999px;
  background: var(--brand); color: var(--sur-brand);
  padding: var(--e3) var(--e4); border-radius: var(--r-champ); font-weight: 650;
}
.saut:focus { left: var(--e4); top: var(--e4); z-index: 100; }

/* --- Bandeau ------------------------------------------------------------ */

.bandeau {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--bordure);
}
.bandeau .contenu {
  display: flex; align-items: center; gap: var(--e4);
  min-height: 4rem; flex-wrap: wrap;
}
.marque {
  display: inline-flex; align-items: center; gap: var(--e2);
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -.02em;
  color: var(--texte); text-decoration: none; margin-right: auto;
}
.marque img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.bandeau nav {
  display: flex; gap: var(--e1) var(--e4); flex-wrap: wrap;
  font-size: .9375rem;
}
.bandeau nav a {
  color: var(--texte-doux); text-decoration: none; padding: var(--e2) 0;
  border-bottom: 2px solid transparent; transition: color var(--t-rapide);
}
.bandeau nav a:hover { color: var(--texte); }
.bandeau nav a[aria-current="page"] {
  color: var(--texte); border-bottom-color: var(--brand); font-weight: 650;
}

/* --- Héro --------------------------------------------------------------- */

.hero { padding: var(--e12) 0 var(--e8); text-align: center; }
@media (min-width: 48rem) { .hero { padding: var(--e24) 0 var(--e16); } }

.hero-logo {
  width: 88px; height: 88px; border-radius: 22px;
  box-shadow: var(--ombre); margin: 0 auto var(--e6); display: block;
}
.hero h1 { margin-bottom: var(--e3); }
.hero .slogan {
  font-size: clamp(1.125rem, 3.2vw, 1.5rem);
  font-weight: 650; color: var(--brand-texte); margin-bottom: var(--e4);
}
.hero .accroche {
  max-width: 38rem; margin: 0 auto var(--e8);
  font-size: clamp(1.0625rem, 2.4vw, 1.1875rem); color: var(--texte-doux);
}

/* --- Boutons ------------------------------------------------------------ */

.boutons {
  display: flex; flex-wrap: wrap; gap: var(--e3);
  justify-content: center; align-items: stretch;
}
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--e2); min-height: 3.25rem; padding: var(--e3) var(--e6);
  border-radius: var(--r-tuile); border: 1px solid transparent;
  font-size: 1rem; font-weight: 700; text-decoration: none;
  transition: transform var(--t-rapide), background var(--t-rapide);
}
.bouton-plein { background: var(--brand); color: var(--sur-brand); }
.bouton-plein:hover { background: var(--brand-fonce); color: var(--sur-brand); transform: translateY(-1px); }
.bouton-clair {
  background: var(--fond-carte); color: var(--texte);
  border-color: var(--bordure); box-shadow: var(--ombre);
}
.bouton-clair:hover { color: var(--texte); transform: translateY(-1px); }

/* Bouton de store non encore disponible.
   Ce n'est PAS un lien : ni <a>, ni href, ni curseur de main. Un bouton qui
   a l'air cliquable et ne fait rien est le genre de détail qui décrédibilise
   un site en une seconde — et la consigne du projet est de ne rien faire
   semblant d'avoir. */
.bouton-attente {
  background: transparent; color: var(--texte-doux);
  border: 1px dashed var(--bordure); cursor: default;
  flex-direction: column; gap: 2px; padding: var(--e3) var(--e6);
}
.bouton-attente .principal { font-weight: 700; color: var(--texte); }
.bouton-attente .secondaire { font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }

/* --- Sections ----------------------------------------------------------- */

section { padding: var(--e12) 0; }
@media (min-width: 48rem) { section { padding: var(--e16) 0; } }
section > .contenu > h2 { margin-top: 0; }
.section-doux { background: var(--fond-doux); border-block: 1px solid var(--bordure); }

.chapo {
  max-width: var(--largeur-texte); color: var(--texte-doux);
  font-size: 1.0625rem; margin-bottom: var(--e8);
}

/* --- Grilles ------------------------------------------------------------ */

.grille { display: grid; gap: var(--e4); grid-template-columns: 1fr; }
@media (min-width: 34rem) { .grille { grid-template-columns: repeat(2, 1fr); gap: var(--e6); } }
@media (min-width: 60rem) { .grille-3 { grid-template-columns: repeat(3, 1fr); } }

.carte {
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--r-tuile); padding: var(--e6);
  transition: transform var(--t-moyen), box-shadow var(--t-moyen);
}
.carte:hover { transform: translateY(-2px); box-shadow: var(--ombre); }
.carte h3 { margin: 0 0 var(--e2); }
.carte p { margin: 0; color: var(--texte-doux); font-size: .9875rem; }

.pastille {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; margin-bottom: var(--e4);
  border-radius: var(--r-carte); background: var(--brand-doux);
  line-height: 1;
  /* `color` sert de `currentColor` aux tracés SVG ci-dessous. */
  color: var(--brand-texte);
}

/* --- Pictogrammes ------------------------------------------------------- */

/* Jeu d'icônes dessinées à la main, en traits, défini une seule fois par
   `<symbol>` en tête de page et repris par `<use>`. Aucune bibliothèque
   externe : la politique de sécurité `default-src 'none'` interdit toute
   ressource distante, et un jeu d'icônes complet pèserait plus lourd que le
   site entier pour treize pictogrammes.
   Une seule couleur, `--brand-texte` — l'orange de marque déjà utilisé pour
   le texte, lisible sur `--brand-doux` en clair comme en sombre. Aucune
   couleur n'est introduite. */
.sprite { display: none; }
.ico {
  width: 1.375rem; height: 1.375rem;
  fill: none; stroke: currentColor;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.cadre .ico { width: 1.25rem; height: 1.25rem; stroke-width: 1.5; }

/* --- Les trois étapes --------------------------------------------------- */

.etapes-3 { counter-reset: pas; display: grid; gap: var(--e8); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .etapes-3 { grid-template-columns: repeat(3, 1fr); gap: var(--e6); } }
.pas { counter-increment: pas; position: relative; padding-top: var(--e12); }
.pas::before {
  content: counter(pas);
  position: absolute; top: 0; left: 0;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: var(--sur-brand);
  font-size: 1.125rem; font-weight: 800;
}
.pas h3 { margin-top: 0; }
.pas p { color: var(--texte-doux); margin: 0; }

/* --- Héro à deux colonnes ----------------------------------------------- */

/* Sur téléphone, le texte passe AVANT le visuel : on lit d'abord ce que fait
   l'application. Sur grand écran, les deux cohabitent. */
.hero-duo {
  display: grid; gap: var(--e12); grid-template-columns: 1fr;
  align-items: center; text-align: center;
}
@media (min-width: 60rem) {
  .hero-duo { grid-template-columns: 1.15fr .85fr; gap: var(--e16); text-align: left; }
  .hero-duo .hero-logo { margin-inline: 0; }
  .hero-duo .accroche { margin-inline: 0; }
  .hero-duo .boutons { justify-content: flex-start; }
}
.hero-visuel { display: grid; place-items: center; }

/* --- Maquette de téléphone ---------------------------------------------- */

/* Le cadre est en CSS pur — aucune image de téléphone téléchargée ailleurs.
   Ce qu'il CONTIENT doit être une capture reelle de l'application : ici
   `splash.png`, l'ecran de lancement veritable, repris de `assets/icon/`.
   Tant qu'aucune capture d'ecran a jour n'existe, on ne dessine pas une
   fausse interface : le cadre porte un texte qui dit ce qu'il attend. */
.telephone {
  width: min(15rem, 72vw); aspect-ratio: 9 / 19.5;
  background: linear-gradient(160deg, #2A231C, #14100C);
  border-radius: 2.25rem; padding: .5rem;
  box-shadow: 0 2px 4px rgba(58, 29, 0, .12), 0 24px 48px rgba(58, 29, 0, .18);
  position: relative; flex: none;
}
@media (prefers-color-scheme: dark) {
  .telephone { box-shadow: 0 2px 4px rgba(0, 0, 0, .5), 0 24px 48px rgba(0, 0, 0, .45); }
}
/* La pastille de l'ecouteur est posee SUR l'ecran, en gris clair : dessinee
   sur la bordure, elle serait invisible — celle-ci ne fait que 8 px, et une
   pastille blanche sur un ecran blanc ne se voit pas. Constate a l'ecran le
   24 aout, pas suppose. */
.telephone::before {
  content: ""; position: absolute; top: 1.15rem; left: 50%;
  transform: translateX(-50%); width: 18%; height: 5px;
  background: #E6DED6; border-radius: 5px; z-index: 2;
}
.telephone-ecran {
  width: 100%; height: 100%; border-radius: 1.85rem; overflow: hidden;
  background: #FFFFFF; display: grid; place-items: center;
  padding: var(--e4); text-align: center;
}
.telephone-ecran img { width: 58%; height: auto; }
.telephone-attente {
  color: #8A7F74; font-size: .8125rem; line-height: 1.5;
  display: grid; gap: var(--e2); place-items: center;
}
.telephone-attente .cadre {
  width: 3rem; height: 3rem; border-radius: var(--r-carte);
  border: 2px dashed #D8CCC0; display: grid; place-items: center;
  font-size: 1.25rem;
}

/* --- Captures d'écran --------------------------------------------------- */

.captures {
  display: grid; gap: var(--e8);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  justify-items: center;
}
.capture { display: grid; gap: var(--e4); justify-items: center; max-width: 16rem; }
.capture .legende { text-align: center; }
.capture .legende strong { display: block; margin-bottom: 2px; }
.capture .legende span { color: var(--texte-doux); font-size: .875rem; }

/* --- Encadrés et listes ------------------------------------------------- */

.encadre {
  background: var(--brand-doux); border: 1px solid var(--bordure);
  border-left: 4px solid var(--brand);
  border-radius: var(--r-carte); padding: var(--e4) var(--e6);
  margin: var(--e6) 0;
}
.encadre p:last-child { margin-bottom: 0; }

.liste-nette { list-style: none; padding: 0; margin: 0 0 var(--e4); }
.liste-nette li {
  position: relative; padding-left: var(--e6); margin-bottom: var(--e2);
}
.liste-nette li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--brand-texte); font-weight: 800;
}

.etapes { padding-left: 1.25rem; }
.etapes li { margin-bottom: var(--e2); }

/* --- FAQ ---------------------------------------------------------------- */

/* <details> natif : aucune ligne de JavaScript, fonctionne sans script, et
   reste ouvrable au clavier. Apple exige une page de support consultable
   sans JS — c'est le cas ici. */
.faq { max-width: var(--largeur-texte); }
.faq details {
  border: 1px solid var(--bordure); border-radius: var(--r-carte);
  background: var(--fond-carte); margin-bottom: var(--e3);
  overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: var(--e4) var(--e6);
  font-weight: 650; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--brand-texte); font-size: 1.5rem;
  font-weight: 400; line-height: 1; flex: none;
  transition: transform var(--t-rapide);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: var(--fond-doux); }
.faq .reponse { padding: 0 var(--e6) var(--e4); color: var(--texte-doux); }
.faq .reponse > :last-child { margin-bottom: 0; }

/* --- Contenu long (pages juridiques) ------------------------------------ */

.page-texte { padding: var(--e8) 0 var(--e16); }
.page-texte .contenu { max-width: calc(var(--largeur-texte) + 4rem); }
.page-texte h2 { font-size: 1.4375rem; margin-top: var(--e10, 2.5rem); }
.page-texte h3 { font-size: 1.125rem; }
.maj {
  color: var(--texte-doux); font-size: .9375rem;
  padding-bottom: var(--e4); border-bottom: 1px solid var(--bordure);
  margin-bottom: var(--e8);
}

/* Un tableau ne fait JAMAIS déborder la page : il défile dans son propre
   cadre. C'est la seule zone du site autorisée à défiler horizontalement. */
.table-enveloppe {
  overflow-x: auto; margin: var(--e4) 0 var(--e6);
  border: 1px solid var(--bordure); border-radius: var(--r-carte);
  -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th, td { padding: var(--e3) var(--e4); text-align: left; vertical-align: top; }
th { background: var(--fond-doux); font-weight: 700; white-space: nowrap; }
tr + tr th, tr + tr td { border-top: 1px solid var(--bordure); }

/* --- Section discrète (les limites assumées) ---------------------------- */

/* « Ce qui n'existe pas encore » doit rester lisible et honnête, sans peser
   autant qu'un argument de vente. Elle est donc sobre, resserrée, et placée
   juste avant le pied de page — pas au milieu du parcours. */
.limites { padding-block: var(--e12); }
.limites .contenu { max-width: calc(var(--largeur-texte) + 4rem); }
.limites h2 { font-size: 1.25rem; margin-top: 0; }
.limites p, .limites li { color: var(--texte-doux); font-size: .9375rem; }
.limites .liste-nette li::before { content: "•"; }

/* --- Utilitaires -------------------------------------------------------- */

/* Ces deux classes existent pour qu'AUCUN attribut `style=` en ligne ne
   subsiste dans le HTML. C'est ce qui permet la politique de sécurité de
   contenu stricte de `_headers` : `style-src 'self'` refuse aussi les styles
   en ligne, et il aurait fallu y ajouter `unsafe-inline` pour deux marges. */
.espace-avant { margin-top: var(--e8); }
.etroit { max-width: var(--largeur-texte); }

/* --- Pied de page ------------------------------------------------------- */

footer {
  background: var(--fond-doux); border-top: 1px solid var(--bordure);
  padding: var(--e12) 0 var(--e8); font-size: .9375rem; color: var(--texte-doux);
}
.pied-grille { display: grid; gap: var(--e8); grid-template-columns: 1fr; margin-bottom: var(--e8); }
@media (min-width: 40rem) { .pied-grille { grid-template-columns: 2fr 1fr 1fr; } }
.pied-grille h4 {
  margin: 0 0 var(--e3); font-size: .8125rem; font-weight: 750;
  text-transform: uppercase; letter-spacing: .07em; color: var(--texte);
}
.pied-grille ul { list-style: none; padding: 0; margin: 0; }
.pied-grille li { margin-bottom: var(--e2); }
.pied-grille a { color: var(--texte-doux); text-decoration: none; }
.pied-grille a:hover { color: var(--brand-texte); text-decoration: underline; }
.pied-bas {
  border-top: 1px solid var(--bordure); padding-top: var(--e6);
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); justify-content: space-between;
}
.pied-bas p { margin: 0; }