/* Mise en page de l’accueil, en français (landing.html) et en anglais (en.html).
   Réglages : web/reglages.css ; composants communs (barre du haut, boutons, point doré,
   sections, cartes, captures, décompte, pied de page) : web/site.css. */

/* ══ Héros : titre, texte et bouton à gauche, visuel de l’appli à droite. Fond de la page et
   trait dessous, comme toutes les pages (web/site.css, « Haut de page ») ══ */
.hero-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:40px 56px;align-items:center;padding-top:120px;padding-bottom:80px}
@media(max-width:920px){.hero-in{grid-template-columns:minmax(0,1fr);padding-top:56px;padding-bottom:52px}}
.hero h1{margin-bottom:20px;max-width:16ch}
.hero .lead{max-width:52ch}
.hero .btn{margin-top:var(--espace-4)}
.preuves{list-style:none;margin-top:var(--espace-3);display:flex;flex-wrap:wrap;gap:8px 22px;font-size:var(--taille-petite);color:var(--texte-doux)}
.preuves li{display:flex;align-items:center;gap:8px}
.preuves svg{flex:none;width:18px;height:18px;color:var(--lien)}
@media(max-width:600px){.hero .btn,.final .btn{width:100%}.preuves{flex-direction:column}}

/* Vitrine : l’écran des dossiers dans un cadre de navigateur, la fiche d’un dossier dans un
   téléphone qui le chevauche, la confirmation d’envoi. Les captures restent claires en sombre.
   Le téléphone ne recouvre que la colonne de menu de l’appli (21 % de la capture), jamais les
   noms des clients : cadre décalé de 15 %, téléphone à 32 % de la largeur. */
.vitrine{position:relative;padding:0 0 56px 15%}
.navig{border-radius:var(--arrondi);overflow:hidden;background:var(--blanc);box-shadow:var(--ombre)}
.navig-barre{display:flex;align-items:center;gap:16px;height:36px;padding:0 14px;background:color-mix(in srgb,var(--nuit-clair) 6%,var(--blanc));border-bottom:1px solid color-mix(in srgb,var(--nuit-clair) 14%,var(--blanc))}
.navig-barre i{display:inline-block;width:10px;height:10px;border-radius:var(--arrondi-pilule);background:color-mix(in srgb,var(--nuit-clair) 22%,var(--blanc));margin-right:6px}
.navig-adresse{flex:1;max-width:260px;margin:0 auto;padding:3px 12px;border-radius:var(--arrondi-pilule);background:var(--blanc);font-size:var(--taille-mini);color:color-mix(in srgb,var(--nuit-clair) 75%,var(--blanc));text-align:center}
.navig img,.tel img{width:100%;height:auto}
/* Coins du téléphone (36 et 29 px) : un dessin d’appareil, pas un réglage d’arrondi */
.tel{position:absolute;left:0;bottom:0;width:32%;max-width:200px;padding:7px;border-radius:36px;background:var(--nuit-clair);border:1px solid var(--bordure-nuit-forte);box-shadow:var(--ombre)}
.tel img{border-radius:29px}
.notif{position:absolute;right:-14px;bottom:0;display:flex;align-items:center;gap:10px;max-width:270px;padding:12px 16px;border-radius:var(--arrondi-petit);background:var(--blanc);color:var(--nuit-clair);font-size:var(--taille-petite);font-weight:600;line-height:1.4;box-shadow:var(--ombre)}
.notif svg{flex:none;width:20px;height:20px;color:var(--vert)}
.vitrine-cap{margin-top:14px;font-size:var(--taille-petite);color:var(--texte-doux)}
@media(max-width:860px){
  .vitrine{padding:0}
  .navig,.notif{display:none}
  .tel{position:static;width:100%;max-width:340px;margin:0 auto}
}

/* ══ Trois étapes : trois cartes de même hauteur ══ */
.etapes{list-style:none;counter-reset:etape}
.etape{counter-increment:etape}
.etape::before{content:counter(etape);display:grid;place-items:center;width:36px;height:36px;margin-bottom:var(--espace-2);border-radius:var(--arrondi-pilule);background:var(--nuit-clair);color:var(--blanc);font:800 var(--taille-texte)/1 var(--police-titres)}
@media(prefers-color-scheme:dark){.etape::before{background:var(--bleu-nuit);color:var(--nuit)}}
.etape p+p{margin-top:var(--espace-1)}
.etape strong{color:var(--texte);font-weight:600}

/* ══ Bloc à deux colonnes : texte et capture ══ */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--espace-5) 72px;align-items:start}
@media(max-width:860px){.duo{grid-template-columns:minmax(0,1fr);gap:var(--espace-4)}}
.duo .coches{margin-top:var(--espace-3)}
.duo-txt>p{margin-top:var(--espace-2);color:var(--texte-doux);max-width:52ch}
.capture-tel{max-width:360px;margin:0 auto}
@media(max-width:860px){.capture-tel{max-width:300px}}

/* ══ Ce que reçoit le client : l’e-mail et la page de paiement, côte à côte ══ */
.client{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--espace-5);align-items:start}
@media(max-width:860px){.client{grid-template-columns:minmax(0,1fr);gap:var(--espace-4)}}
.client .capture{max-width:520px}
.client .capture-tel{max-width:320px;margin:0}
.client-liste{margin-top:var(--espace-3)}
@media(max-width:860px){.client .capture,.client .capture-tel{margin-left:auto;margin-right:auto}.client .capture-tel{max-width:280px}}
/* Téléphone : l’e-mail entier y serait écrit en 8 px. On montre son haut, à une taille lisible
   (le nom de l’entreprise, le trait bleu, le début du message), le texte coupé fondu dans le
   papier blanc de l’e-mail à droite et en bas ; le texte complet reste dans l’attribut alt. */
@media(max-width:600px){
  .cadre-email{position:relative;overflow:hidden;aspect-ratio:1/1;border:1px solid var(--bordure);border-radius:var(--arrondi);background:var(--blanc)}
  .cadre-email::after{content:"";position:absolute;inset:0;background:linear-gradient(to right,transparent 70%,var(--blanc) 94%),linear-gradient(transparent 70%,var(--blanc) 95%);pointer-events:none}
  .client .cadre-email img{width:175%;max-width:none;margin:-2% 0 0 -4%;border:0;border-radius:0;box-shadow:none}
}

/* ══ Vérifier par soi-même ══ */
.outils{list-style:none;margin-top:var(--espace-2);border-top:1px solid var(--bordure)}
.outils li{padding:2px 0 12px;border-bottom:1px solid var(--bordure)}
/* Lien seul sur sa ligne : cible de 44 px (padding), la description reste collée dessous. */
.outils a{display:inline-block;padding:10px 0;font-weight:700;color:var(--lien);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.outils span{display:block;margin-top:-6px;font-size:var(--taille-petite);color:var(--texte-doux)}
.carte-site .decompte{margin-top:var(--espace-2);padding:0;border:0;background:none}

/* ══ Qui est derrière (affiché seulement si web/identite-fr.json est rempli) ══ */
.qui{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--espace-4);align-items:center}
.qui img{width:120px;height:120px;border-radius:var(--arrondi-pilule);object-fit:cover}
.qui:not(:has(img)){grid-template-columns:minmax(0,1fr)}
.qui .lead{margin-top:var(--espace-1)}
.qui dl{display:grid;gap:4px;margin-top:var(--espace-2);font-size:var(--taille-petite);color:var(--texte-doux)}
.qui dl div{display:flex;flex-wrap:wrap;gap:0 12px}
.qui dt{min-width:9rem;font-weight:600;color:var(--texte)}
.qui dd a{color:var(--lien)}
@media(max-width:600px){.qui{grid-template-columns:minmax(0,1fr)}}

/* ══ Prix : l’outil gratuit, les actes à l’unité ══ */
.prix-titre{font-family:var(--police-titres);font-size:var(--taille-section);font-weight:800;line-height:1.1;margin:var(--espace-1) 0 4px}
.carte-site .coches,.carte-site .prix-actes{margin-top:var(--espace-3)}
.prix-note{margin-top:var(--espace-2);font-size:var(--taille-petite);color:var(--texte-doux)}
.sous-prix{margin-top:var(--espace-3);font-size:var(--taille-petite);color:var(--texte-doux)}


/* ══ Appel final et dossier payé : une carte au trait vert (payé), sans ombre, en clair comme en sombre ══ */
.final-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:920px){.final-in{grid-template-columns:minmax(0,1fr);gap:44px}}
/* Après le bloc des conseils (qui n'est pas une .bande) : le même trait que entre deux bandes. */
.final{border-top:1px solid var(--bordure)}
.final h2{max-width:18ch}
.final .lead{margin:18px 0 var(--espace-4);max-width:40ch}
.decision{justify-self:center;width:100%;max-width:420px;padding:22px;border-radius:var(--arrondi);background:var(--surface);color:var(--texte);border:1px solid color-mix(in srgb,var(--vert) 45%,var(--bordure))}
.decision-head,.decision-who{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.decision-ref{font-size:var(--taille-mini);font-weight:700;color:var(--texte-doux)}
.decision-who{margin-top:14px}
.decision-name{font-weight:700}
.decision-amount{font-family:var(--police-titres);font-size:var(--taille-intertitre);font-weight:800;font-variant-numeric:tabular-nums;color:var(--vert-texte)}
.badge-paid{padding:4px 12px;border-radius:var(--arrondi-pilule);border:1px solid color-mix(in srgb,var(--vert) 30%,transparent);background:var(--vert-fond);color:var(--vert-texte);font-size:var(--taille-mini);font-weight:700}
.decision-close{margin-top:16px;padding-top:14px;border-top:1px solid var(--bordure);font-size:var(--taille-petite);font-weight:600}
.decision-cap{margin-top:14px;text-align:center;font-size:var(--taille-mini);color:var(--texte-doux)}