/* =====================================================================
   HelloSquire — feuille de style commune (accueil, confidentialité,
   mentions légales, page 404). Nouvelle mise en page du 30/09/2026,
   d'après la maquette validée par Romain (mise en page inspirée d'un site
   de logiciel professionnel ; couleurs et textes HelloSquire conservés).

   Principes :
   - une seule police, Atkinson Hyperlegible Next (licence SIL OFL, fichier
     polices/OFL.txt), hébergée ici même : aucune requête vers un tiers ;
   - coins arrondis, bandes de fond alternées, cartes légères ;
   - deux thèmes, clair et sombre. Le thème suit le réglage de l'appareil,
     sauf si le visiteur a choisi avec le bouton (attribut data-theme posé
     sur <html> par le petit script en tête de chaque page) ;
   - aucune image externe, aucun traceur : les pictogrammes sont en SVG
     dans la page.
   ===================================================================== */

/* ---------- police hébergée localement ---------- */
@font-face{font-family:"Atkinson Next";font-style:normal;font-weight:400;font-display:swap;
  src:url("/polices/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Next";font-style:italic;font-weight:400;font-display:swap;
  src:url("/polices/atkinson-hyperlegible-next-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Atkinson Next";font-style:normal;font-weight:700;font-display:swap;
  src:url("/polices/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Atkinson Next";font-style:normal;font-weight:800;font-display:swap;
  src:url("/polices/atkinson-hyperlegible-next-latin-800-normal.woff2") format("woff2")}

/* ---------- couleurs : thème clair par défaut ---------- */
:root{
  --fond:#ffffff;
  --fond-doux:#f4f7fb;    /* bandes alternées */
  --tuile:#eaf0f8;        /* pastilles, pictogrammes */
  --texte:#16202e;        /* encre bleu nuit */
  --texte-doux:#4b5667;
  --filet:#d8dde4;
  --filet-clair:#e6eaf0;
  --accent:#1e4f91;       /* bleu marine */
  --accent-survol:#153a6d;
  --sur-accent:#ffffff;   /* texte posé sur l'accent (boutons, bandeau) */
  --nuit:#0e1a2b;         /* sections sombres (qui est derrière, pied de page) */
  --sur-nuit:#ffffff;
  --sur-nuit-doux:#c9d6e8;
  --champ:#ffffff;
  --ombre:0 24px 60px rgba(14,26,43,.12);
  --succes:#0e7a52;
  --erreur:#b3261e;
  --r-carte:14px;         /* rayon des cartes */
  --r-bouton:999px;       /* boutons en pilule */
  color-scheme:light;
}
/* Thème sombre : bleu nuit franc, pas un noir teinté. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --fond:#0e1a2b;--fond-doux:#13233a;--tuile:#1b2f4a;
    --texte:#e6ebf2;--texte-doux:#a7b2c2;--filet:#2a3a50;--filet-clair:#223349;
    --accent:#9dbdf0;--accent-survol:#c4d8f7;--sur-accent:#0e1a2b;
    --nuit:#081220;--sur-nuit:#e6ebf2;--sur-nuit-doux:#a7b2c2;
    --champ:#13233a;--ombre:0 24px 60px rgba(0,0,0,.35);
    --succes:#6fd3a8;--erreur:#ff9a8f;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --fond:#0e1a2b;--fond-doux:#13233a;--tuile:#1b2f4a;
  --texte:#e6ebf2;--texte-doux:#a7b2c2;--filet:#2a3a50;--filet-clair:#223349;
  --accent:#9dbdf0;--accent-survol:#c4d8f7;--sur-accent:#0e1a2b;
  --nuit:#081220;--sur-nuit:#e6ebf2;--sur-nuit-doux:#a7b2c2;
  --champ:#13233a;--ombre:0 24px 60px rgba(0,0,0,.35);
  --succes:#6fd3a8;--erreur:#ff9a8f;
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:"Atkinson Next",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  font-size:1.0625rem;line-height:1.6;
  background:var(--fond);color:var(--texte);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--accent-survol)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
svg{flex-shrink:0}
.conteneur{max-width:1200px;margin:0 auto;padding:0 24px}
.texte-court{max-width:64ch}

/* ---------- en-tête ---------- */
header{position:sticky;top:0;z-index:50;background:var(--fond);border-bottom:1px solid var(--filet-clair)}
.barre{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
/* Logo : le même pictogramme que le favicon (embranchement, favicon.svg), puis le nom.
   Liseré clair très léger : visible seulement en thème sombre, où la tuile bleu nuit se confond avec le fond. */
.marque{display:inline-flex;align-items:center;gap:12px;font-weight:800;font-size:1.25rem;letter-spacing:-.01em;text-decoration:none;color:var(--texte)}
.marque::before{content:"";width:36px;height:36px;border-radius:10px;background:url("/favicon.svg") center/100% 100% no-repeat;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);flex-shrink:0}
.marque:hover{color:var(--texte)}
.bouton-theme{
  white-space:nowrap;font:inherit;font-size:.9rem;color:var(--texte-doux);background:var(--fond);cursor:pointer;
  border:1px solid var(--filet);padding:8px 14px;border-radius:var(--r-bouton);
}
.bouton-theme:hover{color:var(--texte);border-color:var(--texte-doux)}
.outils{display:flex;gap:14px;align-items:center}
.barre{position:relative}

/* ---------- Menu « 3 tirets » (refonte du 04/10/2026) ----------
   Un seul menu sur toutes les tailles d'écran : le bouton à trois traits,
   en haut à droite, ouvre la liste des pages (site.js). Sur ordinateur, le
   menu est une carte sous le bouton ; sur téléphone, il occupe la largeur.
   Le bouton « Échanger 15 minutes » reste visible à côté, sauf sur petit
   téléphone. Sans JavaScript, le menu ne s'ouvre pas : le plan du site
   reste disponible dans le pied de page. */
.bouton-menu{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;cursor:pointer;
  color:var(--texte);background:var(--fond);border:1px solid var(--filet);border-radius:12px}
.bouton-menu:hover{border-color:var(--texte-doux)}
.tirets{position:relative;display:block;width:20px;height:14px}
/* 06/10/2026 : les traits sont tous posés au milieu (top:6px) et décalés par
   transform. On n'anime plus « top » (propriété de mise en page, plus coûteuse
   pour le navigateur) : seulement transform et opacity. Rendu identique. */
.tirets span{position:absolute;left:0;top:6px;width:20px;height:2px;border-radius:2px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease}
.tirets span:nth-child(1){transform:translateY(-6px)}
.tirets span:nth-child(3){transform:translateY(6px)}
/* Menu ouvert : les trois traits deviennent une croix. */
.bouton-menu[aria-expanded="true"] .tirets span:nth-child(1){transform:rotate(45deg)}
.bouton-menu[aria-expanded="true"] .tirets span:nth-child(2){opacity:0}
.bouton-menu[aria-expanded="true"] .tirets span:nth-child(3){transform:rotate(-45deg)}
.menu{display:none;position:absolute;top:calc(100% + 10px);right:24px;width:340px;z-index:60;
  background:var(--fond);border:1px solid var(--filet);border-radius:var(--r-carte);box-shadow:var(--ombre);padding:10px}
.menu.ouvert{display:block}
.menu-liens{display:flex;flex-direction:column}
.menu-liens a{display:block;padding:13px 16px;border-radius:10px;text-decoration:none;color:var(--texte);font-weight:700;font-size:1.05rem}
.menu-liens a:hover{background:var(--fond-doux);color:var(--texte)}
.menu-liens a[aria-current="page"]{background:var(--tuile);color:var(--accent)}
.menu-bas{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:8px;padding:14px 16px 6px;border-top:1px solid var(--filet-clair);font-size:.92rem}
.menu-bas a{color:var(--texte-doux)}
/* Lien d'évitement : visible seulement au clavier. */
.aller-contenu{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent);color:var(--sur-accent);padding:10px 16px;border-radius:0 0 10px 0}
.aller-contenu:focus{left:0}

/* ---------- boutons ---------- */
.bouton{
  display:inline-block;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;text-align:center;
  background:var(--accent);color:var(--sur-accent);border:1px solid var(--accent);border-radius:var(--r-bouton);
  padding:14px 28px;text-decoration:none;
}
.bouton:hover{background:var(--accent-survol);border-color:var(--accent-survol);color:var(--sur-accent)}
.bouton:disabled{opacity:.6;cursor:default}
.bouton-petit{padding:10px 20px;font-size:.95rem}
.bouton-contour{background:var(--fond);color:var(--texte);border-color:var(--filet)}
.bouton-contour:hover{background:var(--fond);color:var(--texte);border-color:var(--texte-doux)}
/* Bouton clair posé sur le bandeau coloré. */
.bouton-inverse{background:var(--sur-accent);color:var(--accent);border-color:var(--sur-accent)}
.bouton-inverse:hover{background:var(--sur-accent);color:var(--accent-survol);border-color:var(--sur-accent);opacity:.92}

/* ---------- sections de l'accueil ---------- */
.bande{padding:96px 0}
.bande-douce{background:var(--fond-doux)}
.surtitre{display:block;font-size:.85rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
h1{font-size:clamp(2.3rem,5vw,3.75rem);font-weight:800;line-height:1.06;letter-spacing:-.02em}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:800;line-height:1.15;letter-spacing:-.015em}
h3{font-weight:800;line-height:1.25}
.entete-section{max-width:760px;margin-bottom:48px}
.entete-section p{margin-top:14px;color:var(--texte-doux);font-size:1.1rem}

/* Ouverture : texte à gauche, récapitulatif illustratif à droite. */
.ouverture{background:var(--fond-doux);padding:88px 0 96px}
.ouverture .grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.accroche{margin-top:24px;font-size:1.19rem;color:var(--texte-doux);max-width:36em}
.actions{margin-top:32px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.precision{margin-top:18px;font-size:.94rem;color:var(--texte-doux)}

.recap{background:var(--fond);border:1px solid var(--filet);border-radius:var(--r-carte);box-shadow:var(--ombre);overflow:hidden}
.recap-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 24px;background:var(--nuit);color:var(--sur-nuit);font-weight:700}
.recap-tete span{display:flex;align-items:center;gap:10px}
.recap-tete small{font-size:.8rem;font-weight:400;padding:3px 10px;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-bouton)}
.recap ul{list-style:none;padding:6px 24px 14px}
.recap li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0;border-bottom:1px solid var(--filet-clair)}
.recap li:last-child{border-bottom:0}
.recap .ligne{display:flex;align-items:center;gap:14px;min-width:0}
.recap .picto{width:40px;height:40px;border-radius:10px;background:var(--tuile);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.recap strong{display:block;font-size:1rem}
.recap .ligne span span{display:block;font-size:.9rem;color:var(--texte-doux)}
.etiquette{font-size:.82rem;font-weight:700;padding:5px 12px;border-radius:var(--r-bouton);background:var(--tuile);color:var(--accent);white-space:nowrap}
.etiquette.a-valider{background:var(--accent);color:var(--sur-accent)}

/* Cartes de bénéfices. */
.cartes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.carte{border:1px solid var(--filet);border-radius:var(--r-carte);padding:28px;background:var(--fond);display:flex;flex-direction:column;gap:14px}
.carte .picto{width:52px;height:52px;border-radius:12px;background:var(--tuile);color:var(--accent);display:flex;align-items:center;justify-content:center}
.carte .picto.sombre{background:var(--nuit);color:var(--sur-nuit)}
.carte h3{font-size:1.25rem}
.carte p{color:var(--texte-doux);font-size:1rem}

/* Offres en zigzag : texte d'un côté, schéma de parcours de l'autre. */
.offres{display:flex;flex-direction:column;gap:72px}
.offre{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.offre:nth-child(even) .offre-texte{order:2}
.offre .numero{font-weight:700;color:var(--accent)}
.offre h2,.offre h3{font-size:clamp(1.45rem,2.4vw,1.9rem);margin:8px 0 12px;letter-spacing:-.01em;line-height:1.2}
.offre p{color:var(--texte-doux)}
.points{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.points li{display:flex;gap:10px;align-items:flex-start}
.points svg{color:var(--accent);margin-top:4px}
.parcours{background:var(--nuit);border-radius:var(--r-carte);padding:36px;display:flex;flex-direction:column;align-items:stretch;gap:10px}
.parcours .etape{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:12px;background:rgba(255,255,255,.06);color:var(--sur-nuit);font-weight:700}
.parcours .etape::before{content:"";width:10px;height:10px;border-radius:50%;background:#8fa6c6;flex-shrink:0}
.parcours .etape:last-child{background:#ffffff;color:#16202e}
.parcours .etape:last-child::before{background:#1e4f91}
.parcours .fleche{align-self:center;color:#8fa6c6;line-height:1}

/* Bandeau d'appel. */
.bandeau{background:var(--accent);color:var(--sur-accent);padding:72px 0}
.bandeau .conteneur{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.bandeau h2{color:var(--sur-accent)}
.bandeau p{margin-top:10px;max-width:40em;opacity:.9}

/* Exemple réel : 4 étapes en ligne. */
.quatre{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.quatre .pastille{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--sur-accent);display:flex;align-items:center;justify-content:center;font-weight:800;margin-bottom:16px}
.quatre h3{font-size:1.15rem;margin-bottom:8px}
.quatre p{color:var(--texte-doux);font-size:1rem}
.conclusion{margin-top:40px;font-size:1.15rem;font-weight:700;border-left:3px solid var(--accent);padding-left:18px;max-width:46em}

/* Comment ça se passe : grands chiffres. */
.methode .quatre > div{border-top:2px solid var(--accent);padding-top:20px}
.methode .chiffre{font-size:2.6rem;font-weight:800;line-height:1;color:var(--accent);margin-bottom:14px;display:block}

/* Pourquoi travailler avec moi. */
.trois{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.trois > div{border:1px solid var(--filet);border-radius:var(--r-carte);padding:28px}
.trois h3{font-size:1.3rem;margin-bottom:10px}
.trois p{color:var(--texte-doux)}

/* Qui est derrière : section sombre. */
.derriere{background:var(--nuit);color:var(--sur-nuit)}
.derriere-texte{max-width:760px}
.derriere .surtitre{color:var(--sur-nuit-doux)}
.derriere p{color:var(--sur-nuit-doux);margin-top:16px;max-width:40em}
.derriere dl{margin-top:28px;display:grid;grid-template-columns:auto 1fr;gap:10px 24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.15)}
.derriere dt{color:var(--sur-nuit-doux)}
.derriere dd{font-weight:700}
.derriere a{color:var(--sur-nuit)}

/* Questions : accordéon natif (<details>), fonctionne sans script. */
.faq .grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.faq .entete-section{margin-bottom:0}
.questions{display:flex;flex-direction:column;gap:12px}
details{border:1px solid var(--filet);border-radius:var(--r-carte);background:var(--fond)}
details summary{cursor:pointer;font-weight:700;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 24px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";width:10px;height:10px;border-right:2.4px solid var(--accent);border-bottom:2.4px solid var(--accent);transform:rotate(45deg);margin-top:-4px;flex-shrink:0;transition:transform .15s}
details[open] summary::after{transform:rotate(-135deg);margin-top:4px}
details p{padding:0 24px 22px;color:var(--texte-doux);max-width:64ch}

/* Contact. */
.contact .grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:start}
.contact .entete-section p{max-width:34em}
.contact-direct{margin-top:24px;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:1.1rem}
.formulaire{background:var(--fond);border:1px solid var(--filet);border-radius:var(--r-carte);padding:32px}
.champ{margin-bottom:18px}
.champ label{display:block;font-weight:700;font-size:.95rem;margin-bottom:6px}
.champ input,.champ textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--texte);background:var(--champ);
  border:1px solid var(--filet);border-radius:10px;padding:12px 14px;
}
.champ input:focus,.champ textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.champ-piege{position:absolute;left:-9999px;top:-9999px}
.formulaire .bouton{width:100%}
.note{margin-top:14px;font-size:.88rem;color:var(--texte-doux)}
.note a{color:var(--texte-doux)}
#statut-formulaire{margin-top:12px;font-weight:700;min-height:1.4em}
#statut-formulaire.ok{color:var(--succes)}
#statut-formulaire.ko{color:var(--erreur)}

/* ---------- pied de page (toutes les pages) ---------- */
footer{background:var(--nuit);color:var(--sur-nuit-doux);padding:48px 0 56px;font-size:.95rem}
footer a{color:var(--sur-nuit-doux)}
footer a:hover{color:var(--sur-nuit)}
footer strong{color:var(--sur-nuit)}
.pied{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.pied-liens{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- pages de texte (confidentialité, mentions, 404) ---------- */
/* Hauteur minimale : sur une page courte (404), le pied de page reste en bas de l'écran. */
.page-texte{max-width:760px;margin:0 auto;padding:56px 24px 80px;min-height:calc(100vh - 205px)}
.page-texte h1{font-size:clamp(2rem,4.6vw,2.8rem);margin-bottom:8px}
.page-texte .date{color:var(--texte-doux);font-size:.95rem;margin-bottom:36px}
.page-texte h2{font-size:1.25rem;margin:36px 0 10px;letter-spacing:-.01em}
.page-texte p,.page-texte li{color:var(--texte)}
.page-texte p+p{margin-top:10px}
.page-texte ul{padding-left:22px;margin-top:8px}
.page-texte li{margin-bottom:6px}
.page-texte .important{border-left:3px solid var(--accent);padding-left:18px;margin-top:14px}
.page-texte .fiche{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin-top:12px}
.page-texte .fiche dt{color:var(--texte-doux)}
/* Ancienne classe de bouton de la page 404 : même rendu que .bouton. */
.page-texte .bouton{margin-top:20px}

/* ---------- tablette ---------- */
@media (max-width:1040px){
  .cartes,.quatre{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trois{grid-template-columns:1fr}
  .ouverture .grille,.offre,.contact .grille,.faq .grille{grid-template-columns:1fr;gap:40px}
  .offre:nth-child(even) .offre-texte{order:0}
  }
/* ---------- téléphone ---------- */
@media (max-width:820px){
  .barre{min-height:64px}
  .outils{gap:10px}
  /* Téléphone : le menu s'étend sur toute la largeur, sous l'en-tête. */
  .menu{left:0;right:0;width:auto;top:100%;border-radius:0 0 var(--r-carte) var(--r-carte);border-left:0;border-right:0;padding:8px 8px 12px}
}
@media (max-width:640px){
  .conteneur{padding:0 16px}
  .bande{padding:64px 0}
  .ouverture{padding:48px 0 64px}
  .cartes,.quatre{grid-template-columns:1fr}
  .actions .bouton{width:100%}
  .parcours{padding:24px}
  .formulaire{padding:22px}
  .bandeau .bouton{width:100%}
  .derriere dl,.page-texte .fiche{grid-template-columns:1fr;gap:2px}
  .derriere dd,.page-texte .fiche dd{margin-bottom:10px}
  .bouton-theme{padding:7px 11px;font-size:.85rem}
  .bouton-menu{width:42px;height:42px}
  .marque{font-size:1.1rem;gap:10px}
  .marque::before{width:32px;height:32px}
  .etiquette{font-size:.75rem;padding:4px 9px}
}

/* 01/10/2026 : anciens attributs style="" déplacés ici, pour que la politique
   de sécurité (CSP) puisse interdire tout style intégré dans les pages. */
.svg-definitions { position: absolute; }
.marge-haut { margin-top: 28px; }


/* ---------- Vidéos de démonstration (01/10/2026) ----------
   Chaque vidéo est placée en face de l'exemple qu'elle illustre, à la place
   du schéma « parcours », sur toute la largeur de la colonne (format paysage
   1440 × 880). Lecteur natif du navigateur (pause, avance, recul), affiché
   seulement au survol, au toucher ou au clavier (voir site.js).
   02/10/2026 : plus de filet clair ni de fond clair autour de l'image. Le
   cadre arrondi est rempli bord à bord (object-fit: cover) et le fond est
   de la couleur du panneau sombre des vidéos : aucun liseré blanc sur les
   côtés, même quand la taille calculée tombe entre deux pixels. */
.offre-video{margin:0;width:100%}
.offre-video video{display:block;width:100%;height:auto;aspect-ratio:1440/880;border-radius:var(--r-carte);
  border:0;object-fit:cover;background:#0e1a2b;box-shadow:var(--ombre)}
.offre-video video:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* 02/10/2026, 14 h 10 — liserés encore visibles sur téléphone.
   Sur mobile (Safari surtout), l'image de la vidéo est dessinée dans une
   couche à part qui peut tomber un demi-pixel à côté du cadre arrondi : un
   filet de fond apparaît sur un bord. Parade : c'est le cadre (figure) qui
   porte l'arrondi, l'ombre et le fond sombre, et qui coupe ce qui dépasse ;
   la vidéo est agrandie de 2 px de chaque côté et centrée, donc ses bords
   sont toujours hors du cadre visible. On perd 2 px d'image sur chaque bord,
   invisibles à l'œil. « isolation » force Safari à respecter l'arrondi. */
.offre-video{position:relative;overflow:hidden;border-radius:var(--r-carte);
  background:#0e1a2b;box-shadow:var(--ombre);isolation:isolate}
.offre-video video{width:calc(100% + 4px);max-width:none;margin:-2px;
  border-radius:0;box-shadow:none}
/* Le contour du focus clavier passe sur le cadre (la vidéo est coupée). */
.offre-video video:focus-visible{outline:none}
.offre-video:has(video:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
/* « Mon propre agent » : texte et étapes à gauche, vidéo à droite. */
.exemple-grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px;align-items:center}
.exemple-grille>*{min-width:0}
.exemple-grille .quatre{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1040px){
  .exemple-grille{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:640px){
  .exemple-grille .quatre{grid-template-columns:1fr}
}

/* ---------- Le logiciel (02/10/2026) ----------
   Vidéo du Portail Squire sur toute la largeur (format 1920 × 1080),
   puis quatre points clés en dessous. */
.logiciel-video video{aspect-ratio:1920/1080}
.logiciel .quatre{margin-top:40px}
.logiciel .quatre h3{font-size:1.15rem;margin-bottom:6px}
.logiciel .quatre p{color:var(--texte-doux)}

/* ---------- Exemples : écart réduit et mise en avant (02/10/2026, 16 h 15) ----------
   Avant : chaque exemple occupait presque toute la hauteur de l'écran (trop
   de vide entre deux exemples sur ordinateur, retour de Romain).
   Maintenant : écart normal entre les exemples, et c'est une animation qui
   met en avant celui du milieu de l'écran (celui dont la vidéo joue) :
   - l'exemple actif est net, à sa place ;
   - les autres sont estompés et légèrement abaissés ;
   - en faisant défiler, chaque exemple « remonte » et s'éclaire en arrivant
     au centre, pendant que le précédent s'estompe.
   La classe .offres-focus est posée par site.js (bloc de lecture
   automatique) ; sans JavaScript, ou si l'appareil demande de réduire les
   animations, elle n'est jamais posée : tout reste net et immobile. */
@media (min-width:1041px){
  .offres{gap:120px}
}
@media (max-width:1040px){
  .offres{gap:96px}
}
.offres-focus .offre>*{transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.offres-focus .offre:not(.en-avant)>*{opacity:.3}
.offres-focus .offre:not(.en-avant) .offre-texte{transform:translateY(20px)}
.offres-focus .offre:not(.en-avant) .offre-video{transform:translateY(36px) scale(.96)}
/* la vidéo suit le texte avec un léger décalage */
.offres-focus .offre.en-avant .offre-video{transition-delay:.1s}

/* =====================================================================
   Refonte en plusieurs pages (04/10/2026)
   Accueil, Exemples, Comment ça marche, L'application, Qui suis-je,
   Questions et contact. Styles communs aux nouvelles pages.
   ===================================================================== */

/* ---------- ouverture des pages intérieures ---------- */
.page-tete{background:var(--fond-doux);padding:72px 0 64px}
.page-tete h1{font-size:clamp(2.1rem,4.4vw,3.2rem);max-width:20em}
.page-tete .accroche{max-width:46em}
.page-derriere h1{font-size:clamp(2.1rem,4.4vw,3.2rem)}

/* ---------- sommaire des exemples (puces cliquables, collé sous l'en-tête) ---------- */
.sommaire{position:sticky;top:77px;z-index:40;background:var(--fond);border-bottom:1px solid var(--filet-clair)}
.puces{display:flex;gap:10px;overflow-x:auto;padding:14px 0;scrollbar-width:thin}
.puces a{flex-shrink:0;white-space:nowrap;text-decoration:none;font-size:.93rem;font-weight:700;color:var(--texte-doux);
  border:1px solid var(--filet);border-radius:var(--r-bouton);padding:7px 15px;background:var(--fond)}
.puces a:hover{color:var(--texte);border-color:var(--texte-doux)}
.puces a.actif{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
/* Les ancres tombent sous l'en-tête ET sous le sommaire. */
html:has(.sommaire){scroll-padding-top:150px}
@media (max-width:820px){ .sommaire{top:65px} }

/* ---------- accueil : trois « portes » vers les pages ---------- */
.portes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.porte{display:flex;flex-direction:column;gap:12px;padding:30px;border-radius:var(--r-carte);border:1px solid var(--filet);
  background:var(--fond);text-decoration:none;color:var(--texte);transition:border-color .15s,transform .15s,box-shadow .15s}
.porte:hover{color:var(--texte);border-color:var(--accent);box-shadow:var(--ombre);transform:translateY(-2px)}
.porte .numero{font-weight:700;color:var(--accent)}
.porte h3{font-size:1.4rem}
.porte p{color:var(--texte-doux);flex-grow:1}
.porte-lien{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.porte{transition:none}.porte:hover{transform:none}}

/* ---------- bloc « Page suivante » ---------- */
.suite{padding:56px 0 72px}
.suite-lien{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 32px;border-radius:var(--r-carte);
  border:1px solid var(--filet);text-decoration:none;color:var(--texte);background:var(--fond)}
.suite-lien:hover{color:var(--texte);border-color:var(--accent);box-shadow:var(--ombre)}
.suite-texte{display:flex;flex-direction:column;gap:4px}
.suite-texte .surtitre{margin-bottom:0}
.suite-texte strong{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800;letter-spacing:-.01em}
.suite-texte span:last-child{color:var(--texte-doux)}
.suite-fleche{width:56px;height:56px;border-radius:50%;background:var(--accent);color:var(--sur-accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ---------- Comment ça marche : la formule ---------- */
.formule{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.formule-bloc{border:1px solid var(--filet);border-radius:var(--r-carte);padding:36px;background:var(--fond)}
.formule-bloc h2{margin:14px 0 10px}
.formule-bloc>p{color:var(--texte-doux)}
.formule-quand{display:inline-block;font-size:.85rem;font-weight:700;padding:5px 14px;border-radius:var(--r-bouton);background:var(--tuile);color:var(--accent)}
.formule-mois{background:var(--nuit);border-color:var(--nuit);color:var(--sur-nuit)}
.formule-mois>p{color:var(--sur-nuit-doux)}
.formule-mois .formule-quand{background:rgba(255,255,255,.12);color:var(--sur-nuit)}
.formule-mois .points svg{color:#9dbdf0}
.formule-note{margin-top:28px;color:var(--texte-doux);max-width:60em;border-left:3px solid var(--filet);padding-left:18px}

/* Étapes numérotées. */
.etapes{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.etapes li{border-top:2px solid var(--accent);padding-top:20px}
.etapes h3{font-size:1.12rem;margin-bottom:8px}
.etapes p{color:var(--texte-doux);font-size:1rem}

/* Si vous arrêtez. */
.deux{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.deux>div{border:1px solid var(--filet);border-radius:var(--r-carte);padding:28px}
.deux h3{font-size:1.25rem}
.colonne-arret{background:var(--fond-doux)}
.points-arret .tiret{width:12px;height:2px;background:var(--texte-doux);margin-top:12px;flex-shrink:0;margin-right:4px}

/* ---------- L'application : maquettes d'écrans (HTML/CSS, données fictives) ---------- */
.ecran{background:var(--fond);border:1px solid var(--filet);border-radius:var(--r-carte);box-shadow:var(--ombre);overflow:hidden;font-size:.95rem}
.ecran-barre{display:flex;align-items:center;gap:14px;padding:14px 20px;background:var(--nuit);color:var(--sur-nuit)}
.ecran-marque{font-weight:800}
.ecran-titre{color:var(--sur-nuit-doux);border-left:1px solid rgba(255,255,255,.2);padding-left:14px}
.ecran-client{margin-left:auto;font-size:.82rem;padding:3px 10px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-bouton);white-space:nowrap}
.ecran-corps{padding:8px 20px 14px}
.ecran-pied{padding:10px 20px;font-size:.8rem;color:var(--texte-doux);border-top:1px solid var(--filet-clair);background:var(--fond-doux)}
/* Liste des agents. */
.ag{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--filet-clair)}
.ag:last-child{border-bottom:0}
.ag-nom{display:flex;flex-direction:column;min-width:0}
.ag-nom span{font-size:.88rem;color:var(--texte-doux)}
.badge{font-size:.8rem;font-weight:700;padding:4px 11px;border-radius:var(--r-bouton);white-space:nowrap}
.badge-actif{background:rgba(14,122,82,.12);color:var(--succes)}
.badge-valider{background:var(--accent);color:var(--sur-accent)}
.badge-pause{background:var(--tuile);color:var(--texte-doux)}
/* Éléments à valider. */
.val{padding:14px 0;border-bottom:1px solid var(--filet-clair)}
.val:last-child{border-bottom:0}
.val-tete{display:flex;flex-direction:column}
.val-tete span{font-size:.86rem;color:var(--texte-doux)}
.val-texte{margin:8px 0 12px;padding:10px 14px;border-radius:10px;background:var(--fond-doux);color:var(--texte-doux);font-size:.9rem;font-style:italic}
.val-actions{display:flex;gap:8px;flex-wrap:wrap}
.mini-bouton{font-size:.82rem;font-weight:700;padding:6px 12px;border-radius:var(--r-bouton);border:1px solid var(--filet);color:var(--texte)}
.mini-bouton.plein{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
/* Journal des mises à jour. */
.journal{list-style:none}
.journal li{display:grid;grid-template-columns:70px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--filet-clair)}
.journal li:last-child{border-bottom:0}
.j-date{font-weight:700;color:var(--accent);font-size:.88rem;padding-top:1px}
.j-texte{color:var(--texte-doux);font-size:.9rem}
.j-texte strong{display:block;color:var(--texte);font-size:.95rem}
/* Équipe et droits. */
.droits{width:100%;border-collapse:collapse;font-size:.88rem}
.droits th,.droits td{padding:12px 6px;border-bottom:1px solid var(--filet-clair);text-align:center}
.droits thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--texte-doux);font-weight:700}
.droits th[scope="row"],.droits thead th:first-child{text-align:left;padding-left:0}
.droits th[scope="row"] strong{display:block;font-size:.95rem}
.droits th[scope="row"] span{font-weight:400;color:var(--texte-doux);font-size:.84rem}
.droits tbody tr:last-child th,.droits tbody tr:last-child td{border-bottom:0}
.droit{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%}
.droit.oui{background:rgba(14,122,82,.12);color:var(--succes)}
.droit.non{color:var(--texte-doux)}

/* ---------- questions : pleine largeur ---------- */
.faq .questions{max-width:880px}

/* ---------- pied de page : plan du site ---------- */
.pied-plan{display:flex;gap:10px 22px;flex-wrap:wrap;max-width:520px}
.pied-plan a{color:var(--sur-nuit)}

/* ---------- tailles d'écran ---------- */
@media (max-width:1040px){
  .portes,.formule,.deux{grid-template-columns:1fr}
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .page-tete{padding:48px 0 44px}
  .etapes{grid-template-columns:1fr}
  .formule-bloc{padding:26px}
  .suite-lien{padding:22px}
  .suite-fleche{width:46px;height:46px}
  .appel-entete{display:none}
  .ecran-corps{padding:6px 14px 12px}
  .ecran-barre{padding:12px 14px;gap:10px;font-size:.88rem}
  .ecran-titre{padding-left:10px}
  .droits{font-size:.82rem}
  .droits th,.droits td{padding:10px 3px}
  .droits thead th{font-size:.68rem;letter-spacing:0}
  .journal li{grid-template-columns:58px 1fr;gap:10px}
}
@media (max-width:420px){
  .ecran-client{display:none}
}

/* ---------- Accueil allégé (04/10/2026, 21 h 49) ----------
   Phrase clé seule (plus de cadres) ; deux portes au lieu de trois ;
   bandeau d'appel réduit à un titre et un bouton ; bouton du thème
   dans la barre du haut. */
.phrase-cle{padding:80px 0}
.phrase-cle .entete-section{margin-bottom:0}
.portes-deux{grid-template-columns:repeat(2,minmax(0,1fr))}
.bandeau h2{max-width:22em}
@media (max-width:1040px){ .portes-deux{grid-template-columns:1fr} }
@media (max-width:640px){
  .phrase-cle{padding:56px 0}
  .outils{gap:8px}
}
@media (max-width:360px){ .bouton-theme{display:none} }

/* Comment ça marche : 4 étapes (04/10/2026, 22 h 16). */
.etapes-quatre{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){ .etapes-quatre{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .etapes-quatre{grid-template-columns:1fr} }

/* ---------- Exemples en onglets (04/10/2026, 22 h 41) ----------
   Un seul exemple affiché à la fois (site.js) ; les puces servent d'onglets.
   « .offre » est en grille : sans cette règle, l'attribut hidden ne
   masquerait pas l'exemple. Rangée de puces non collée (page courte). */
.offre[hidden]{display:none}
.onglets-exemples{position:static}
.onglets-exemples .puces{justify-content:flex-start}
.puces a[role="tab"]{cursor:pointer}
.exemples{padding:64px 0 80px}
/* Apparition douce de l'exemple choisi. */
.onglets-actifs .offre:not([hidden]){animation:apparition .35s ease}
@keyframes apparition{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.onglets-actifs .offre:not([hidden]){animation:none}}

/* ---------- Bouton du thème : lune / soleil (04/10/2026, 23 h 14) ----------
   Même forme que le bouton du menu. theme.js pose data-etat (light / dark) :
   lune en thème clair (passer en sombre), soleil en thème sombre. */
.bouton-theme{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border-radius:12px;color:var(--texte)}
.bouton-theme svg{display:block}
.bouton-theme .icone-soleil{display:none}
.bouton-theme[data-etat="dark"] .icone-lune{display:none}
.bouton-theme[data-etat="dark"] .icone-soleil{display:block}
@media (max-width:640px){ .bouton-theme{width:42px;height:42px;padding:0} }
@media (max-width:360px){ .bouton-theme{display:inline-flex} }

/* ---------- Page Logiciel (04/10/2026) ---------- */
.logiciel{padding:64px 0}
.fonctions-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fonction-carte{border:1px solid var(--filet);border-radius:var(--r-carte);padding:28px;background:var(--fond);display:flex;flex-direction:column;gap:12px}
.fonction-carte .picto{width:52px;height:52px;border-radius:12px;background:var(--tuile);color:var(--accent);display:flex;align-items:center;justify-content:center}
.fonction-carte .picto.sombre{background:var(--nuit);color:var(--sur-nuit)}
.fonction-carte h3{font-size:1.2rem}
.fonction-carte p{color:var(--texte-doux);font-size:1rem}
@media (max-width:1040px){ .fonctions-grille{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ .fonctions-grille{grid-template-columns:1fr} }
.bouton-theme svg{width:22px;height:22px}

/* =====================================================================
   Accessibilité — audit du 06/10/2026 (règles Vercel Web Interface
   Guidelines). Contrastes calculés selon la formule WCAG 2.
   ===================================================================== */

/* Bordure des champs de formulaire : il faut au moins 3:1 pour qu'on voie
   où écrire. Avant : var(--filet), 1,37:1. Après : 3,50:1 sur champ blanc
   (3,25:1 sur la bande douce) en clair, 3,59:1 en sombre. */
:root{--bord-champ:#7f8a9a}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bord-champ:#66799a}}
:root[data-theme="dark"]{--bord-champ:#66799a}
.champ input,.champ textarea{border-color:var(--bord-champ)}

/* Champ refusé par la vérification du formulaire (site.js, rencontre.js) :
   bordure de la couleur d'erreur (6,54:1 en clair, 7,73:1 en sombre),
   doublée par une ombre pour ne pas faire bouger la mise en page. */
.champ [aria-invalid="true"],.accord input[aria-invalid="true"]{border-color:var(--erreur);box-shadow:0 0 0 1px var(--erreur)}
/* Le champ en erreur reçoit le focus : son contour reste rouge (sinon le bleu du focus masquait l'erreur). */
.champ [aria-invalid="true"]:focus,.accord input[aria-invalid="true"]:focus{outline-color:var(--erreur);border-color:var(--erreur)}

/* Contour du focus clavier visible sur les fonds colorés.
   Sur le bandeau (fond = accent), le contour accent était invisible (1,00:1) :
   on prend la couleur du texte posé sur l'accent (8,13:1 clair, 9,13:1 sombre).
   Sur les fonds « nuit » (pied de page, section sombre, bloc mensuel) :
   couleur claire (17,48:1 clair, 15,68:1 sombre). */
.bandeau :focus-visible{outline-color:var(--sur-accent)}
footer :focus-visible,.derriere :focus-visible,.formule-mois :focus-visible{outline-color:var(--sur-nuit)}

/* Légende des astérisques au-dessus des formulaires. */
.legende-obligatoire{font-size:.9rem;color:var(--texte-doux);margin-bottom:14px}

/* Titres : coupure de ligne équilibrée (évite un mot seul sur la dernière ligne).
   Sans effet dans les navigateurs qui ne connaissent pas encore cette règle. */
h1,h2,h3{text-wrap:balance}

/* Réduire les animations : plus de transition sur le menu et les questions. */
@media (prefers-reduced-motion:reduce){
  .tirets span,details summary::after{transition:none}
}

/* Bouton d'envoi pendant l'attente du serveur (aria-disabled posé par le script). */
.bouton[aria-disabled="true"],.bouton[aria-disabled="true"]:hover{opacity:.6;cursor:default;background:var(--accent);border-color:var(--accent)}

/* ---------- Accueil : les agents, puis l'application dédiée (démo des 09-10/10/2026) ----------
   Demandes de Romain : promouvoir l'application avec les agents ; « surtout mettre en avant
   les agents puis boom gérez-les dans une application dédiée » ; faire comprendre que presque
   tout est possible ; l'application sur l'ordinateur et sur le téléphone, partout.
   - ouverture : un agent au travail (vidéo de la page Exemples) ;
   - « Presque toute tâche… » : cinq agents (mêmes noms que dans l'application) + autres tâches ;
   - section sombre « application dédiée » : écran d'ordinateur + téléphone, seul moment animé ;
   - l'application en détail : onglets (site.js), captures du téléphone sur petit écran ;
   - captures en clair ou en sombre selon le thème choisi sur le site ;
   - téléphone : bouton « Me contacter » fixé en bas une fois l'ouverture passée. */

/* Captures : la version claire ou sombre suit le thème du site (bouton lune / soleil ou
   réglage de l'appareil). L'image masquée n'est pas téléchargée (loading="lazy"). */
.capture-sombre{display:none}
:root[data-theme="dark"] .capture-clair{display:none}
:root[data-theme="dark"] .capture-sombre{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .capture-clair{display:none}
  :root:not([data-theme="light"]) .capture-sombre{display:block}
}

/* Cadres : écran d'ordinateur (barre avec l'adresse) et téléphone (bord épais arrondi). */
:root{--cadre-tel:#16202e}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--cadre-tel:#34465f}}
:root[data-theme="dark"]{--cadre-tel:#34465f}
.ecran-app{background:var(--fond);border:1px solid var(--filet);border-radius:12px;overflow:hidden;box-shadow:var(--ombre)}
/* Pas de « display » ici : il annulerait le choix clair / sombre ci-dessus. */
.ecran-app img,.telephone img{width:100%;height:auto;vertical-align:top}
.ecran-app-barre{display:flex;align-items:center;gap:6px;padding:9px 14px;border-bottom:1px solid var(--filet-clair);background:var(--fond-doux)}
.ecran-app-barre span{width:9px;height:9px;border-radius:50%;background:var(--filet)}
.ecran-app-barre em{font-style:normal;font-size:.78rem;color:var(--texte-doux);margin-left:10px;padding:2px 12px;border-radius:var(--r-bouton);background:var(--fond)}
.telephone{border:7px solid var(--cadre-tel);border-radius:30px;overflow:hidden;background:var(--fond);box-shadow:0 18px 40px rgba(14,26,43,.28)}

/* Ouverture : texte à gauche, vidéo d'un agent à droite. */
.ouverture .grille-vitrine{grid-template-columns:minmax(0,10fr) minmax(0,13fr);gap:56px}
.ouverture-video video{box-shadow:var(--ombre)}

/* Mot composé jamais coupé au trait d'union. */
.sans-coupure{white-space:nowrap}

/* « Presque toute tâche… » : titre sur toute la largeur, cinq agents, puis les autres tâches. */
.entete-ligne h2{max-width:18em}
.lien-fort{font-weight:700;text-decoration:none}
.lien-fort:hover{text-decoration:underline}
.liste-agents>div{display:grid;grid-template-columns:minmax(0,17em) minmax(0,1fr);gap:8px 32px;padding:22px 0;border-top:1px solid var(--filet)}
.liste-agents>div:last-child{border-bottom:1px solid var(--filet)}
.liste-agents dt{font-weight:800;font-size:1.12rem}
.liste-agents dd{color:var(--texte-doux)}
.autres-taches{margin-top:56px}
.autres-taches h3{font-size:1.12rem;margin-bottom:16px}
.autres-taches ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.autres-taches li{padding:9px 16px;border-radius:var(--r-bouton);background:var(--fond-doux);border:1px solid var(--filet-clair);font-size:.98rem}
.autres-taches .tache-vous{padding:0;background:none;border:0}
.autres-taches .tache-vous a{display:inline-block;padding:9px 16px;border-radius:var(--r-bouton);border:1px solid var(--accent);font-weight:700;text-decoration:none}
.autres-taches .tache-vous a:hover{background:var(--accent);color:var(--sur-accent)}

/* « Et vous les gérez dans une application dédiée. » : section sombre, grand titre centré,
   écran d'ordinateur large, téléphone posé devant à droite, trois repères dessous. */
.bande-nuit{background:var(--nuit);color:var(--sur-nuit)}
.bande-nuit :focus-visible{outline-color:var(--sur-nuit)}
.entete-boom{text-align:center;max-width:860px;margin:0 auto 56px}
.entete-boom h2{font-size:clamp(2rem,4.6vw,3.4rem);color:var(--sur-nuit)}
.entete-boom p{margin-top:18px;font-size:1.25rem;color:var(--sur-nuit-doux)}
.vitrine{position:relative;margin:0}
.vitrine-grande{max-width:980px;margin:0 auto;padding-bottom:40px}
.vitrine-grande .ecran-app{border-color:rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.vitrine-grande .telephone{position:absolute;right:-56px;bottom:0;width:27%;box-shadow:0 24px 60px rgba(0,0,0,.5);border-color:#2b3c55}
.partout{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;max-width:980px;margin:56px auto 0}
.partout h3{font-size:1.15rem;color:var(--sur-nuit);margin-bottom:8px}
.partout p{color:var(--sur-nuit-doux)}
.bande-nuit .mention-fictive{text-align:center;color:var(--sur-nuit-doux);margin-top:40px;font-size:.85rem}
/* Seul moment animé : l'écran puis le téléphone apparaissent (site.js : .anime puis .revele). */
.application-dediee.anime .vitrine-grande .ecran-app{opacity:0;transform:translateY(28px) scale(.98);transition:opacity .7s ease,transform .7s ease}
.application-dediee.anime .vitrine-grande .telephone{opacity:0;transform:translateY(60px);transition:opacity .7s ease .35s,transform .7s ease .35s}
.application-dediee.anime.revele .vitrine-grande .ecran-app,
.application-dediee.anime.revele .vitrine-grande .telephone{opacity:1;transform:none}

/* Titre de section et lien sur la même ligne. */
.entete-ligne{display:flex;align-items:baseline;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;max-width:none}

/* L'application en détail : onglets en pastilles, un écran à la fois. */
.visite-onglets{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.visite-onglets [role="tab"]{font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;padding:10px 18px;border-radius:var(--r-bouton);
  border:1px solid var(--filet);background:var(--fond);color:var(--texte)}
.visite-onglets [role="tab"]:hover{border-color:var(--texte-doux)}
.visite-onglets [role="tab"][aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--sur-accent)}
.visite-ecran{margin:0}
.visite-ecran+.visite-ecran{margin-top:40px}            /* sans JavaScript : écrans les uns sous les autres */
.visite.onglets-actifs .visite-ecran+.visite-ecran{margin-top:0}
.visite-ecran[hidden]{display:none}
.visite-ecran figcaption{margin-top:16px;font-size:1.05rem}
.visite.onglets-actifs .visite-ecran:not([hidden]){animation:apparition .3s ease}
.mention-fictive{font-size:.85rem;color:var(--texte-doux)}

/* Bouton « Me contacter » en bas de l'écran, téléphone seulement (site.js ajoute .visible). */
.appel-mobile{display:none}
@media (max-width:640px){
  .appel-mobile{display:block;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;
    transform:translateY(calc(100% + 24px));visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
  .appel-mobile.visible{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  .appel-mobile .bouton{display:block;width:100%;box-shadow:0 10px 28px rgba(14,26,43,.28)}
}
@media (prefers-reduced-motion:reduce){
  .appel-mobile,.appel-mobile.visible{transition:none}
  .visite.onglets-actifs .visite-ecran:not([hidden]){animation:none}
}

/* Tablette. */
@media (max-width:1040px){
  .ouverture .grille-vitrine{grid-template-columns:1fr;gap:40px}
  .vitrine-grande{margin-right:40px}
  .vitrine-grande .telephone{right:-40px}
  .partout{grid-template-columns:1fr;gap:24px;max-width:640px}
}
/* Téléphone : le téléphone passe devant, au centre ; l'écran d'ordinateur reste derrière, réduit. */
@media (max-width:640px){
  .liste-agents>div{grid-template-columns:1fr;padding:18px 0}
  .autres-taches{margin-top:40px}
  .autres-taches li,.autres-taches .tache-vous a{padding:8px 13px;font-size:.92rem}
  .entete-boom{text-align:left;margin-bottom:36px}
  .entete-boom p{font-size:1.1rem}
  .vitrine-grande{margin:0;padding-bottom:0}
  .vitrine-grande .ecran-app{width:88%}
  .vitrine-grande .ecran-app-barre{display:none}
  .vitrine-grande .telephone{position:relative;right:auto;width:56%;margin:-34% 0 0 auto;border-width:6px;border-radius:26px}
  .partout{margin-top:40px}
  /* L'application en détail : captures du téléphone (balises <picture>), dans un cadre de téléphone. */
  .visite-onglets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .visite-onglets [role="tab"]{padding:9px 6px;font-size:.88rem;line-height:1.25}
  .visite .ecran-app{max-width:290px;margin:0 auto;border:7px solid var(--cadre-tel);border-radius:30px}
  .visite-ecran figcaption{text-align:center}
}

/* ---------- Premier visu du 11/10/2026 : accueil « ce qui échappe » et page Agents ----------
   Demande de Romain : « la première page doit être marquante, montrer leurs douleurs, la
   répétition de tâches, la perte de devis, de clients… puis la page des agents où l'on montre
   que tout est sur mesure… on montre toujours le logiciel qui permet de gérer ces agents ».
   - ouverture sombre : trois phrases courtes et un téléphone couvert de notifications en
     attente (dessiné en HTML/CSS, exemple fictif) ; les notifications arrivent une à une ;
   - « ce qui se répète » : la situation, puis ce qu'elle coûte (en rouge) ;
   - le même téléphone une fois les agents en place (en vert : réglé ou prêt à valider) ;
   - page Agents : fiche « sur mesure » d'un agent, étapes, exemples en vidéo, tâches possibles.
   Rouge = ce qui attend, vert = ce qu'un agent a réglé (mêmes couleurs que l'application). */

/* Ouverture sombre. */
.ouverture-douleur{background:var(--nuit);color:var(--sur-nuit);padding:88px 0 104px}
.ouverture-douleur :focus-visible{outline-color:var(--sur-nuit)}
.grille-douleur{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
/* Ouverture : le texte prend plus de place, chaque phrase du titre tient sur une ligne. */
.ouverture-douleur .grille-douleur{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px}
.ouverture-douleur h1{font-size:clamp(2.4rem,4.6vw,4rem);line-height:1.02;letter-spacing:-.025em;color:var(--sur-nuit)}
.ouverture-douleur h1 span{display:block}
.ouverture-douleur .accroche{color:var(--sur-nuit-doux);max-width:30em;margin-top:28px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:36px}
.lien-clair{color:var(--sur-nuit)}
.lien-clair:hover{color:var(--sur-nuit)}
.ouverture-douleur .bouton{background:var(--sur-nuit);border-color:var(--sur-nuit);color:var(--nuit)}
.ouverture-douleur .bouton:hover{opacity:.9;color:var(--nuit)}

/* Téléphone verrouillé, dessiné (pas une capture) : mêmes couleurs dans les deux thèmes. */
.ecran-verrou{justify-self:center;width:min(330px,100%);aspect-ratio:9/18.5;padding:26px 12px 18px;border-color:#2b3c55;
  background:linear-gradient(165deg,#2a5ea8 0%,#16325a 45%,#0b1626 100%);color:#fff;display:flex;flex-direction:column;
  font-size:.82rem;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.verrou-heure{text-align:center;margin-bottom:22px;line-height:1.1}
.verrou-heure span{display:block;font-size:3.4rem;font-weight:800;letter-spacing:-.02em}
.verrou-heure small{font-size:.9rem;opacity:.85}
.notifs{list-style:none;display:flex;flex-direction:column;gap:8px}
.notifs li{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;
  background:rgba(255,255,255,.92);color:#16202e;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.notifs strong{display:block;font-size:.86rem;line-height:1.25}
.notifs li div span{display:block;color:#4b5667;line-height:1.3}
.notifs time{align-self:start;font-size:.72rem;color:#4b5667}
.notif-icone{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#fde8e7;color:#b3261e}
.ecran-regle .notif-icone{background:#e3f4ec;color:#0e7a52}
.notifs-plus{margin-top:auto;text-align:center;font-size:.8rem;opacity:.85;padding-top:12px}
/* Seul effet de l'ouverture : les notifications s'empilent une à une au chargement. */
.ouverture-douleur .notifs li,.ouverture-douleur .notifs-plus{animation:arrivee .45s ease both}
.ouverture-douleur .notifs li:nth-child(1){animation-delay:.35s}
.ouverture-douleur .notifs li:nth-child(2){animation-delay:.75s}
.ouverture-douleur .notifs li:nth-child(3){animation-delay:1.15s}
.ouverture-douleur .notifs li:nth-child(4){animation-delay:1.55s}
.ouverture-douleur .notifs li:nth-child(5){animation-delay:1.95s}
.ouverture-douleur .notifs-plus{animation-delay:2.4s}
@keyframes arrivee{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ouverture-douleur .notifs li,.ouverture-douleur .notifs-plus{animation:none}}

/* « Ce qui se répète » : la situation à gauche, ce qu'elle coûte à droite, en rouge. */
.douleurs{list-style:none}
.douleurs li{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:8px 40px;align-items:baseline;padding:26px 0;border-top:1px solid var(--filet)}
.douleurs li:last-child{border-bottom:1px solid var(--filet)}
.douleurs strong{font-size:clamp(1.2rem,2.3vw,1.65rem);font-weight:800;line-height:1.25;letter-spacing:-.01em}
.douleurs span{color:var(--erreur);font-weight:700;font-size:1.2rem}

/* La réponse : le même téléphone à gauche, le texte à droite. */
.grille-solution{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.grille-solution h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.grille-solution .accroche{margin-top:20px}
.grille-solution .ecran-verrou{box-shadow:0 30px 70px rgba(14,26,43,.28)}

/* Page Agents : fiche « sur mesure » d'un agent (exemple). */
.page-tete-agents{padding:80px 0 88px}
.page-tete-agents h1{font-size:clamp(2.3rem,4.8vw,3.6rem)}
.fiche-agent{margin:0;background:var(--fond);border:1px solid var(--filet);border-radius:var(--r-carte);box-shadow:var(--ombre);overflow:hidden}
.fiche-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 22px;background:var(--nuit);color:var(--sur-nuit)}
.fiche-tete small{font-size:.78rem;padding:3px 10px;border:1px solid rgba(255,255,255,.35);border-radius:var(--r-bouton)}
.fiche-agent dl{padding:6px 22px}
.fiche-agent dl>div{display:grid;grid-template-columns:8.5em minmax(0,1fr);gap:4px 16px;padding:13px 0;border-bottom:1px solid var(--filet-clair)}
.fiche-agent dl>div:last-child{border-bottom:0}
.fiche-agent dt{font-weight:700;color:var(--texte-doux);font-size:.92rem}
.fiche-agent dd{font-weight:700}
.fiche-agent figcaption{padding:14px 22px;background:var(--fond-doux);color:var(--texte-doux);font-size:.9rem;border-top:1px solid var(--filet-clair)}
.autres-taches-grandes{margin-top:0}
.autres-taches-grandes li,.autres-taches-grandes .tache-vous a{font-size:1.05rem;padding:12px 18px}

/* Tablette et téléphone. */
@media (min-width:1041px){ .ouverture-douleur h1 span{white-space:nowrap} }
.onglets-exemples .puces{margin-bottom:28px}
@media (max-width:1040px){
  .grille-douleur,.grille-solution,.ouverture-douleur .grille-douleur{grid-template-columns:1fr;gap:48px}
  .grille-solution .ecran-verrou{order:2}
  .ecran-verrou{width:300px}
}
@media (max-width:640px){
  .ouverture-douleur{padding:56px 0 72px}
  .douleurs li{grid-template-columns:1fr;padding:20px 0}
  .douleurs span{font-size:1.02rem}
  .ecran-verrou{width:280px;font-size:.78rem}
  .verrou-heure span{font-size:2.9rem}
  .fiche-agent dl>div{grid-template-columns:1fr}
  .autres-taches-grandes li,.autres-taches-grandes .tache-vous a{font-size:.95rem;padding:9px 14px}
}
/* Entre 1 041 et 1 100 px : le téléphone posé devant l'écran ne doit pas dépasser de la page. */
@media (min-width:1041px) and (max-width:1100px){ .vitrine-grande{margin-right:56px} }

/* ---------- Thème clair : tout clair ; thème sombre : sections sombres (11/10/2026, 22 h 42) ----------
   Demande de Romain : « quand c'est en mode clair tout doit être clair, c'est plus uniforme ».
   Les sections « nuit » (ouverture de l'accueil, section de l'application, pied de page, carte
   « La maintenance », fiche d'un agent) utilisent --nuit / --sur-nuit : en clair, ces couleurs
   deviennent un bleu très pâle et le texte foncé. Ce qui était réglé pour un fond sombre
   (filets blancs transparents, ombres fortes, téléphone dessiné, bandeau d'appel) passe par les
   variables ci-dessous, avec une valeur claire par défaut et une valeur sombre. */
:root{
  --nuit:#eef3f9;            /* sections « fortes » en clair : bleu très pâle */
  --sur-nuit:#16202e;
  --sur-nuit-doux:#4b5667;
  --cadre-tel:#cfd7e2;       /* bord des téléphones */
  --trait-section:rgba(22,32,46,.12);
  --pastille-section:var(--tuile);
  --coche-section:var(--accent);
  --ombre-forte:0 30px 70px rgba(14,26,43,.16);
  --verrou-fond:linear-gradient(165deg,#f6f9fd 0%,#e2ebf7 55%,#cddcf0 100%);
  --verrou-texte:#16202e;
  --notif-ombre:0 4px 14px rgba(14,26,43,.10);
  --bouton-fort-fond:var(--accent);
  --bouton-fort-texte:#ffffff;
  --bandeau-fond:var(--tuile);
  --bandeau-texte:var(--texte);
  --bandeau-bouton-fond:var(--accent);
  --bandeau-bouton-texte:#ffffff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --nuit:#081220;--sur-nuit:#e6ebf2;--sur-nuit-doux:#a7b2c2;--cadre-tel:#2b3c55;
    --trait-section:rgba(255,255,255,.12);--pastille-section:rgba(255,255,255,.12);--coche-section:#9dbdf0;
    --ombre-forte:0 30px 80px rgba(0,0,0,.45);
    --verrou-fond:linear-gradient(165deg,#2a5ea8 0%,#16325a 45%,#0b1626 100%);--verrou-texte:#ffffff;--notif-ombre:0 4px 14px rgba(0,0,0,.18);
    --bouton-fort-fond:#e6ebf2;--bouton-fort-texte:#0e1a2b;
    --bandeau-fond:#1e4f91;--bandeau-texte:#ffffff;--bandeau-bouton-fond:#ffffff;--bandeau-bouton-texte:#1e4f91;
  }
}
:root[data-theme="dark"]{
  --nuit:#081220;--sur-nuit:#e6ebf2;--sur-nuit-doux:#a7b2c2;--cadre-tel:#2b3c55;
  --trait-section:rgba(255,255,255,.12);--pastille-section:rgba(255,255,255,.12);--coche-section:#9dbdf0;
  --ombre-forte:0 30px 80px rgba(0,0,0,.45);
  --verrou-fond:linear-gradient(165deg,#2a5ea8 0%,#16325a 45%,#0b1626 100%);--verrou-texte:#ffffff;--notif-ombre:0 4px 14px rgba(0,0,0,.18);
  --bouton-fort-fond:#e6ebf2;--bouton-fort-texte:#0e1a2b;
  --bandeau-fond:#1e4f91;--bandeau-texte:#ffffff;--bandeau-bouton-fond:#ffffff;--bandeau-bouton-texte:#1e4f91;
}
/* Téléphone dessiné de l'accueil (fond d'écran, heure, cartes de notification). */
.ecran-verrou{background:var(--verrou-fond);color:var(--verrou-texte);border-color:var(--cadre-tel);box-shadow:var(--ombre-forte)}
.grille-solution .ecran-verrou{box-shadow:var(--ombre-forte)}
.notifs li{box-shadow:var(--notif-ombre)}
/* Section de l'application : écran d'ordinateur et téléphone. */
.vitrine-grande .ecran-app{border-color:var(--trait-section);box-shadow:var(--ombre-forte)}
.vitrine-grande .telephone{border-color:var(--cadre-tel);box-shadow:var(--ombre-forte)}
/* Boutons et pastilles posés sur une section « nuit ». */
.ouverture-douleur .bouton{background:var(--bouton-fort-fond);border-color:var(--bouton-fort-fond);color:var(--bouton-fort-texte)}
.ouverture-douleur .bouton:hover{color:var(--bouton-fort-texte)}
.formule-mois .formule-quand{background:var(--pastille-section)}
.formule-mois .points svg{color:var(--coche-section)}
.fiche-tete small{border-color:var(--trait-section)}
.derriere dl{border-top-color:var(--trait-section)}
/* Bandeau d'appel : bleu très pâle en clair, bleu de la marque en sombre. */
.bandeau{background:var(--bandeau-fond);color:var(--bandeau-texte)}
.bandeau h2{color:var(--bandeau-texte)}
.bandeau .bouton-inverse{background:var(--bandeau-bouton-fond);border-color:var(--bandeau-bouton-fond);color:var(--bandeau-bouton-texte)}
.bandeau .bouton-inverse:hover{background:var(--bandeau-bouton-fond);color:var(--bandeau-bouton-texte);opacity:.9}
.bandeau :focus-visible{outline-color:var(--bandeau-texte)}
/* Cadre des vidéos : fond assorti au thème (il ne se voit qu'avant l'affichage de l'image de la vidéo). */
.offre-video{background:var(--nuit)}
/* Page Application. */
.entete-boom h1{font-size:clamp(2.2rem,5vw,3.6rem);color:var(--sur-nuit)}
.page-application{padding-top:72px}
.fonctions-grille .picto{background:var(--tuile);color:var(--accent)}
@media (max-width:640px){ .visite-onglets-quatre{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* 11/10/2026 (23 h 06) : accueil, partie application — un seul texte au lieu des trois
   (« Au bureau », « En déplacement », « Toujours sous la main »), demande de Romain. */
.partout-un{max-width:760px;margin:48px auto 0;text-align:center;font-size:1.2rem;line-height:1.5;color:var(--sur-nuit);text-wrap:balance}
/* « Qui sommes-nous » est plus long que « Qui suis-je » : le plan du pied de page tient sur une ligne. */
.pied-plan{max-width:600px}
@media (max-width:640px){.partout-un{margin-top:32px;font-size:1.1rem}}