/* ═══════════════════════════════════════════════════════════════════════
   Aventurusse — le socle commun aux pages secondaires
   (blog.html, sur-mesure.html, groupe.html)

   ATTENTION : ces règles sont RECOPIÉES de `accueil.html`, qui garde les
   siennes en ligne — sa page est un seul fichier, premier écran compris, et
   on ne veut pas d'un aller-retour réseau de plus avant le globe. Une
   retouche de palette, de bandeau, de bouton ou de pied de page se fait donc
   AUX DEUX ENDROITS. Le jour où la maquette devient le site, tout se range
   ici et l'accueil vient s'y brancher.
   ═══════════════════════════════════════════════════════════════════════ */

  :root {
    --fond: #10275a;
    --espace: #0a1a3f;
    --blanc: #f4f6fb;
    --rouge-sombre: #3f1512;
    --encre: #10275a;
    --gris: #c3d2ee;
    --gris-fonce: #4c5b7d;
    --bordure: rgba(143, 180, 248, .32);
    --marque: #8fb4f8;
    --lien: #1a4bb8;
    --accent: #e0a33c;
    --rouge: #d52b1e;
    --titre: Sora, 'Segoe UI', system-ui, sans-serif;
    --texte: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--espace); color: #fff;
    font-family: var(--texte); -webkit-font-smoothing: antialiased;
  }
  a { color: var(--marque); text-decoration: none; }
  a:hover { color: var(--accent); }

  /* ── un lien dans une phrase, sur fond clair ──
     `--marque` est fait pour le bleu nuit ; sur `.band--blanc` il rend
     1,9:1 de contraste et le mot cliquable s'efface. `--lien` rend 8,9:1,
     et le soulignement dit « cliquable » sans compter sur la couleur.

     LE SÉLECTEUR VISE LES LIENS DE PHRASE, ET RIEN D'AUTRE. Un premier essai
     visait `.band--blanc a:not([class])`, en pariant qu'un lien décoré porte
     une classe : faux. Les trois dossiers de `/articles` et les puces de
     rubrique décorent leur lien par le CONTENEUR et laissent l'ancre nue —
     ils se sont retrouvés soulignés en ligne. Un lien de phrase, lui, vit
     dans un `<p>` ; les liens décorés vivent dans un `<li>` nu ou dans un
     `<b>`. D'où `p a`, plus les listes du corps d'un article. */
  .band--blanc p a:not([class]),
  .corps-art li a:not([class]),
  .faq a:not([class]), .faq-art a:not([class]) {
    color: var(--lien);
    text-decoration: underline;
    text-decoration-color: rgba(26,75,184,.45);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .band--blanc p a:not([class]):hover, .corps-art li a:not([class]):hover,
  .faq a:not([class]):hover, .faq-art a:not([class]):hover {
    color: #0f2f7a; text-decoration-color: currentColor;
  }
  /* Le sommaire d'un article est fait de `<li><a>` : il est dans le corps,
     mais ce n'est pas du texte courant. Il garde l'habit que lui donne
     `css/blog.css`. */
  .sommaire-art li a:not([class]) { color: inherit; text-decoration: none; }

  canvas { display: block; touch-action: pan-y; }

  /* ── drapeau ── */
  .drapeau { display: inline-flex; flex-direction: column; gap: 0; width: 22px; height: 15px; border-radius: 3px; overflow: hidden; flex: none; }
  .drapeau span { flex: 1; }
  .drapeau span:nth-child(1) { background: #fff; }
  .drapeau span:nth-child(2) { background: #2b5bb7; }
  .drapeau span:nth-child(3) { background: var(--rouge); }
  /* ── navigation ── */
  .nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 50;
    display: flex; align-items: center; gap: 28px;
    padding: 16px 32px; transition: background .3s ease, box-shadow .3s ease;
  }
  .nav.is-scrolled { background: rgba(8, 20, 48, .82); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(143,180,248,.18); }
  .nav__logo { display: flex; align-items: center; gap: 10px; font-family: var(--titre); font-weight: 700; font-size: 19px; color: #fff; letter-spacing: .01em; }
  .nav__logo:hover { color: #fff; }
  /* Le logo de l'agence remplace le petit drapeau tricolore qui tenait cette
     place : il porte déjà les trois couleurs, et il se reconnaît. 32 px — la
     hauteur des deux lignes du mot « Aventurusse », pas plus, pour que le
     bandeau ne grossisse pas. */
  .nav__logo-img { width: 32px; height: 32px; flex: none; display: block; }
  @media (max-width: 767px) { .nav__logo-img { width: 28px; height: 28px; } }
  .nav__links { display: flex; gap: 22px; margin-left: auto; align-items: center; }
  .nav__links a { font-size: 14px; font-weight: 500; color: rgba(255,255,255,.85); }
  .nav__links a:hover { color: var(--accent); }
  .nav__cta { background: var(--accent); color: var(--encre) !important; font-weight: 600; padding: 9px 18px; border-radius: 10px; font-size: 14px; }
  .nav__cta:hover { transform: translateY(-1px); }
  /* ── le menu de téléphone ──
     Sous 900 px les cinq liens ne tiennent pas, et « Réserver votre voyage »
     passait à la ligne dans le bandeau. Il ne reste que le sigle et trois
     traits ; tout le reste vit dans le panneau qu'ils ouvrent. */
  .nav__burger {
    display: none; margin-left: auto; width: 44px; height: 44px; flex: none;
    background: none; border: 0; padding: 10px; cursor: pointer;
    flex-direction: column; justify-content: space-between; align-items: stretch;
  }
  .nav__burger i {
    display: block; height: 2px; border-radius: 2px; background: #fff;
    box-shadow: 0 1px 4px rgba(5,14,38,.8);
    transition: transform .24s cubic-bezier(.4,0,.2,1), opacity .16s ease;
  }
  .nav__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
  .nav__burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
  .nav__panneau {
    position: fixed; inset: 0; z-index: 49; display: none;
    flex-direction: column; justify-content: center; gap: 4px;
    padding: 90px 24px 40px;
    background: linear-gradient(180deg, #071431 0%, #0a1a3f 55%, #10275a 100%);
    opacity: 0; transition: opacity .22s ease;
  }
  .nav__panneau a {
    display: block; padding: 16px 6px; font-family: var(--titre); font-weight: 600;
    font-size: 20px; color: #fff; border-bottom: 1px solid rgba(143,180,248,.16);
  }
  .nav__panneau a:last-of-type { border-bottom: 0; }
  .nav__panneau .btn { display: flex; justify-content: center; margin-top: 22px; width: 100%; font-size: 16px; padding: 16px 20px; border-bottom: 0; }
  body.menu-ouvert { overflow: hidden; }
  body.menu-ouvert .nav__panneau { display: flex; opacity: 1; }
  body.menu-ouvert .nav { background: transparent; box-shadow: none; backdrop-filter: none; }
  @media (max-width: 900px) {
    .nav__links { display: none; }
    .nav__burger { display: flex; }
    .nav { padding: 12px 14px 12px 18px; }
  }

  /* ── Le bouton « Espace client » ──
     Il n'est pas de la même nature que « Réserver votre voyage » : celui-là
     appelle un inconnu, celui-ci ramène quelqu'un qui a déjà payé. D'où un
     bouton tenu en retrait — un contour, pas un aplat — juste avant l'or, et
     une petite silhouette pour qu'on le trouve sans le lire. */
  .nav__client {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid rgba(224,163,60,.55); border-radius: 10px;
    padding: 8px 14px; font-size: 14px; font-weight: 600;
    color: #fff !important; transition: background .18s ease, border-color .18s ease, color .18s ease;
  }
  .nav__client::before {
    content: ""; width: 15px; height: 15px; flex: none;
    background: currentColor; -webkit-mask: var(--silhouette) center / contain no-repeat; mask: var(--silhouette) center / contain no-repeat;
  }
  .nav__client:hover { background: rgba(224,163,60,.16); border-color: var(--accent); color: var(--accent) !important; }
  /* La silhouette : une tête et deux épaules, en SVG dans une variable pour
     que le bandeau et le panneau de téléphone partagent le même dessin. */
  :root { --silhouette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3.2 3.2 0 1 0 0-6.4A3.2 3.2 0 0 0 8 8Zm0 1.4c-3 0-5.4 1.7-5.4 3.8V15h10.8v-1.8c0-2.1-2.4-3.8-5.4-3.8Z'/%3E%3C/svg%3E"); }
  /* Dans le panneau de téléphone, « Espace client » n'est pas un lien de plus :
     c'est un bouton plein, de la même taille que « Réserver votre voyage »,
     posé juste au-dessus. Deux gestes possibles en bas de menu, deux boutons —
     l'or appelle un inconnu, le bleu ramène quelqu'un qui a déjà payé. */
  .btn--client { background: linear-gradient(135deg, #2a6ae4 0%, #1a4bb8 100%); color: #fff !important; box-shadow: 0 6px 20px rgba(26,92,222,.45); gap: 10px; }
  .btn--client:hover { color: #fff !important; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26,92,222,.55); }
  .btn--client::before {
    content: ""; width: 17px; height: 17px; flex: none; background: currentColor;
    -webkit-mask: var(--silhouette) center / contain no-repeat; mask: var(--silhouette) center / contain no-repeat;
  }
  /* `.nav__panneau .btn` cale la marge du dernier bouton ; les deux se suivent,
     et seul celui du bas garde l'écart d'origine. */
  .nav__panneau .btn--client { margin-top: 22px; margin-bottom: 12px; }
  .nav__panneau .btn--client + .btn { margin-top: 0; }

  /* ── Ce qui entre dans l'écran s'annonce, et vite ──
     (25 août 2026, demande de Thomas : « fais que les choses qui s'affichent
     vont s'animer très rapidement ».)

     Sur téléphone le défilement est désormais celui du système, sans saut ni
     calage : c'est ce mouvement-là qui dit qu'on change de bloc. Il doit donc
     être bref — un titre qui met sept dixièmes de seconde à monter se fait
     rattraper par le pouce et arrive après le lecteur. Trois cents
     millisecondes, douze pixels de montée, et une courbe qui part vite pour
     se poser doucement (easeOutExpo) : on voit le mouvement, on ne l'attend
     jamais.

     Les éléments d'un même bloc se suivent de quarante-cinq millisecondes,
     posées par `--rang` : quatre cartes s'ouvrent en cascade en moins de deux
     dixièmes, ce qui se lit comme un seul geste et non comme quatre.

     `will-change` n'est PAS posé ici : il resterait sur des centaines
     d'éléments toute la vie de la page, pour économiser une composition qui
     dure trois cents millisecondes. */
  .apparait {
    opacity: 0; transform: translateY(12px);
    transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
    transition-delay: calc(var(--rang, 0) * 45ms);
  }
  .apparait.est-la { opacity: 1; transform: none; }
  /* Rien ne doit rester invisible si le script ne part pas : sans JavaScript,
     la classe n'est jamais posée, et `.apparait` seul cacherait la page. */
  .sans-js .apparait { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .apparait { opacity: 1; transform: none; transition: none; }
  }

  /* ── boutons ── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 14px 26px; border-radius: 10px; font-weight: 600; font-size: 15px;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .btn--solid { background: linear-gradient(135deg, #2a6ae4 0%, #1a4bb8 100%); color: #fff; box-shadow: 0 6px 20px rgba(26,92,222,.45); }
  .btn--solid:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26,92,222,.55); }
  .btn--ghost { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.5); color: #fff; backdrop-filter: blur(2px); }
  .btn--ghost:hover { background: #fff; color: var(--encre); transform: translateY(-2px); }
  .btn--gold { background: var(--accent); color: var(--encre); box-shadow: 0 6px 20px rgba(200,151,42,.4); }
  .btn--gold:hover { color: var(--encre); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(200,151,42,.5); }

  /* ── bandes de contenu ── */
  .band { min-height: 100vh; min-height: 100dvh; padding: 104px 0; display: flex; flex-direction: column; justify-content: center; position: relative; }
  .band--slim { min-height: 100vh; min-height: 100dvh; padding: 72px 0; }
  /* Les pages secondaires ne sont pas faites de blocs d'un écran : leurs bandes
     font la hauteur de ce qu'elles contiennent, et s'enchaînent normalement. */
  .band--page { min-height: 0; padding: 72px 0; }
  /* ── une section qui continue la précédente ──
     Elle portait `style="padding-top:0"` : le titre suivant venait alors se
     coller à la dernière ligne du texte au-dessus, sans une respiration ni un
     trait. On garde l'absence de nouveau fond — c'est la même bande — mais on
     rend l'air, et un filet dit que le sujet change. */
  .band--suite { padding-top: 0; }
  .band--suite > .band__inner, .band--suite > .corps-art { border-top: 1px solid rgba(16,39,90,.13); padding-top: 56px; }
  @media (max-width: 700px) { .band--suite > .band__inner, .band--suite > .corps-art { padding-top: 38px; } }
  /* le joint entre deux blocs, lisible sur fond clair comme sur fond sombre */
  .band::before, .ville::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 4;
    background: linear-gradient(90deg, transparent, rgba(224,163,60,.5) 22%, rgba(224,163,60,.5) 78%, transparent);
  }
  .band--blanc { background: linear-gradient(180deg, #eaeef8 0%, var(--blanc) 45%, #e3e9f5 100%); color: var(--encre); }
  .band--bleu { background: linear-gradient(180deg, #0c1f49 0%, var(--fond) 55%, #16336f 100%); color: #fff; }
  .band--rouge { background: linear-gradient(135deg, #6b0f08 0%, #8f1810 55%, #a52114 100%); color: #fff; }
  /* `width: 100%` : LA ligne qui aligne les blocs entre eux.
     `.band` est un flex en colonne ; `margin: 0 auto` sur un enfant flex annule
     l'etirement et lui donne la largeur de son CONTENU. Chaque bande prenait
     donc une largeur differente — « Pourquoi y aller » ne tombait jamais en face
     du bloc suivant, et une question qui s'ouvrait elargissait tout son cadre
     (1 094 px fermee, 1 128 ouverte). Meme cause que le debordement de
     `.corps-art` sur telephone, meme remede. */
/* ═══════ UNE SEULE LARGEUR POUR TOUT LE SITE ═══════
   Thomas, le 3 septembre 2026, pour la deuxième fois : « refais tout de la
   même taille qu'avant au niveau de la place sur l'écran, je parle surtout de
   la largeur. Tout exactement comme voyage-neige-hiver.html. Le site doit
   avoir une taille unie. »

   Il y avait TROIS largeurs. 1080 px pour la plupart des pages (la règle de
   base, ci-dessous) ; 1280 px sur les trois pages qui portaient leur propre
   surcharge en ligne — voyage-neige-hiver, voyage-placement-moscou, agence ;
   et 1325 px sur l'accueil, qui s'élargissait encore à 1460 au-delà de seize
   cents pixels. D'une page à l'autre, le contenu changeait de bord.

   C'est 1280 partout, la valeur de la page que Thomas donne pour référence, et
   le pied de page suit — sinon il paraît en retrait sous un contenu plus large.
   Le `92vw` garde une marge sur les écrans étroits. Ne pas reposer de largeur
   ailleurs : cette ligne est la seule. */
  .band__inner { width: 100%; max-width: min(1280px, 92vw); margin: 0 auto; padding: 0 24px; }
  .band__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; font-weight: 600; margin: 0 0 12px; }
  .band--blanc .band__eyebrow { color: #2a6ae4; }
  .band--bleu .band__eyebrow, .band--rouge .band__eyebrow { color: var(--accent); }
  .band__title { font-family: var(--titre); font-weight: 700; font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.15; margin: 0 0 10px; }
  /* Sur une question à plusieurs réponses, le formulaire attend un clic sur
     « Continuer » : sans cet anneau, on croit la page bloquée. */
  .btn--attend { box-shadow: 0 0 0 3px rgba(224,163,60,.4); }
  .band__sub { font-size: 16px; line-height: 1.7; margin: 0 0 40px; text-wrap: pretty; }
  .band--blanc .band__sub { color: var(--gris-fonce); }
  .band--bleu .band__sub, .band--rouge .band__sub { color: rgba(255,255,255,.85); }
  .grille3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  /* Deux cartes seulement : on les cale à gauche comme le titre et le chapeau,
     et on les borne. Centrées, elles flottaient sous un texte aligné à gauche. */
  .grille3--deux { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
  @media (max-width: 900px) { .grille3, .grille3--deux { grid-template-columns: 1fr; } }
  /* Les cartes de date et la grille de la lettre vivaient ici aussi, recopiées
     de l'accueil : aucune page secondaire ne s'en sert, et deux copies d'une
     règle finissent toujours par diverger. Elles sont restées à l'accueil. */

  /* ── cartes ── */
  .carte-art { display: block; background: #fff; border: 1px solid rgba(16,39,90,.12); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(16,39,90,.08); transition: transform .18s ease, box-shadow .18s ease; }
  .carte-art:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(16,39,90,.14); }
  .carte-art .vignette { height: 140px; background: linear-gradient(135deg, #8fb4f8 0%, #e0a33c 140%); overflow: hidden; }
  /* La vignette était un aplat dégradé : depuis que les articles existent,
     elle porte leur photo. Le dégradé reste dessous — il se voit le temps que
     l'image arrive, et si un article n'en a pas encore. */
  .carte-art .vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .carte-art .corps { padding: 18px; }
  .carte-art .rubrique { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #b57f22; font-weight: 600; }
  /* Sur une carte blanche, une pastille crème sans contour ne se détache pas
     et son mot tombe à 3,2:1. Elle prend le contour de sa couleur, comme la
     puce active d'une page de rubrique, et de l'air des deux côtés — elle
     touchait la photo au-dessus et le titre en dessous. */
  .carte-art .rubrique {
    display: inline-block; align-self: flex-start;
    border: 1px solid var(--cat, #b57f22); border-radius: 999px;
    padding: 5px 11px; margin: 2px 0 10px;
  }

  /* ── les quatre rubriques du blog, et leur couleur ──
     Quatre couleurs prises dans le drapeau : le bleu des liens, l'or de la
     marque, le rouge profond des bandes, et le bleu nuit de l'encre. Chacune
     tient dans une variable, posée sur la carte par `data-cat` : la pastille,
     le bandeau de la vignette et le liseré du haut la suivent tous les trois,
     et une cinquième rubrique se déclare en une ligne. */
  /* Ces quatre-là restent ici, mais ne sont plus la source : la couleur vit
     dans `blog_categories.accent_color` (migration 004) et arrive en ligne, par
     `--cat`, sur la carte et sur la puce. L'attribut l'emporte sur ces règles,
     qui deviennent le repli — celui qui sert quand la base n'a pas encore de
     couleur, ou quand la page est écrite à la main comme les douze articles
     statiques. Une cinquième rubrique créée dans l'administration n'a donc plus
     besoin d'une ligne ici : elle apporte sa couleur avec elle.
     `--cat-clair` n'est PAS stocké — il se déduit, en dessous. */
  [data-cat="formalites"] { --cat: #2a6ae4; --cat-clair: #e8f0ff; }
  [data-cat="route"]      { --cat: #b57f22; --cat-clair: #fdf3df; }
  [data-cat="patrimoine"] { --cat: #a52114; --cat-clair: #fdeceb; }
  [data-cat="quotidien"]  { --cat: #10275a; --cat-clair: #e9edf7; }
  /* Le fond clair d'une rubrique inconnue de la liste ci-dessus : douze pour
     cent de sa couleur sur du blanc, la même recette que les quatre valeurs
     écrites à la main. Déclaré APRÈS elles pour ne pas les écraser, et sur
     `[style*="--cat"]` pour ne toucher que ce qui porte une couleur en ligne. */
  [data-cat][style*="--cat"] { --cat-clair: color-mix(in srgb, var(--cat) 12%, #fff); }
  .carte-art[data-cat] { border-top: 3px solid var(--cat); }
  .carte-art[data-cat] .vignette { background: linear-gradient(150deg, var(--cat) 0%, color-mix(in srgb, var(--cat) 45%, #f4f6fb) 100%); }
  .carte-art[data-cat] .rubrique {
    display: inline-block; align-self: flex-start; color: var(--cat); background: var(--cat-clair);
    border: 1px solid var(--cat); border-radius: 999px; padding: 5px 11px;
    margin: 2px 0 10px; letter-spacing: .1em;
  }
  /* la rangée des quatre rubriques, au-dessus des cartes */
  .rubriques { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
  .rubriques a {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: var(--gris-fonce);
    border: 1px solid rgba(16,39,90,.14); background: #fff;
    border-radius: 999px; padding: 8px 14px 8px 11px;
    transition: border-color .18s ease, color .18s ease, transform .18s ease;
  }
  .rubriques a::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cat); flex: none; }
  .rubriques a:hover { color: var(--cat); border-color: var(--cat); transform: translateY(-2px); }
  .carte-art h3 { font-family: var(--titre); font-size: 18px; line-height: 1.35; margin: 8px 0; color: var(--encre); }
  .carte-art p { font-size: 14px; color: var(--gris-fonce); line-height: 1.55; margin: 0 0 12px; }
  .carte-art .meta { font-size: 12px; color: #7286ad; }
  .avis-card { background: #fff; color: var(--encre); border: 1px solid rgba(16,39,90,.12); border-radius: 16px; padding: 24px; box-shadow: 0 10px 30px rgba(16,39,90,.08); }
  .avis-card p { font-size: 14.5px; line-height: 1.7; color: var(--gris-fonce); margin: 0 0 16px; }
  .avis-card b { display: block; font-family: var(--titre); font-size: 15px; }
  .avis-card > span { font-size: 12.5px; color: #7286ad; }
  .avis-card .etoiles { color: #00b67a; letter-spacing: 2px; font-size: 15px; margin-bottom: 10px; }
  /* LE BLOC DES AVIS NE DOIT PAS SUIVRE LA LONGUEUR DE CE QU'ON LUI DONNE.
     C'est le seul bloc dont la hauteur dépend d'un tirage au hasard : trois
     avis courts le laissaient à 824 px, et le seul avis long du Baïkal — six
     cent quatre-vingt-dix signes contre cent vingt pour le plus bref — le
     poussait à 987, sur un écran de 800. Mesuré le 3 septembre 2026.
     Neuf lignes tiennent le plus long des six, et tiendront le prochain quel
     qu'il soit : la longueur d'un témoignage à venir n'est pas de notre
     ressort. Le texte reste ENTIER dans la page — c'est celui que Google lit,
     et celui que le client retrouve dans son espace. */
  .avis-card p {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9;
    overflow: hidden;
  }

  /* La carte dépliée par « Lire la suite » : on retire la coupe, c'est tout. */
  /* `.avis-card p` pèse une classe ET un type ; `.avis-card__p--entier`
     seul pesait moins et ne l'emportait pas — le bouton disparaissait sans
     que rien ne se déplie. Le sélecteur reprend donc le `p`. */
  .avis-card p.avis-card__p--entier { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .avis-suite {
    display: inline-block; margin: -8px 0 14px; padding: 0;
    border: 0; background: none; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--lien, #1a4bb8);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .avis-suite:hover { color: #123a92; }
  .band--bleu .avis-suite, .band--rouge .avis-suite { color: var(--accent); }

  .trust { margin-top: 44px; text-align: center; }
  .trust .etoiles-g { display: inline-flex; gap: 4px; margin-bottom: 12px; }
  .trust .etoiles-g i { width: 28px; height: 28px; background: #00b67a; color: #fff; font-style: normal; display: grid; place-items: center; font-size: 16px; border-radius: 4px; }
  .trust p { margin: 0 0 6px; font-size: 14px; color: var(--gris-fonce); }
  .trust a { display: inline-block; font-weight: 600; font-size: 15px; color: #2a6ae4; }

  /* ── formulaires ── */
  .contact__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: start; }
  @media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }
  .contact__infos { list-style: none; margin: 24px 0 0; padding: 0; }
  .contact__infos li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.92); font-size: 15px; }
  .contact__infos li:last-child { border-bottom: none; }
  /* `top: 19px` calait la pastille sur une hauteur de ligne fixe : des qu'une
     entree passait sur deux lignes, le point se retrouvait au milieu du vide.
     `.7em` le pose sur la PREMIERE ligne, quelle que soit la suite. */
  .contact__infos li::before { content: ""; position: absolute; left: 0; top: calc(12px + .7em); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
  .contact__infos a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
  .contact__infos a:hover { color: var(--accent); }

  .contact__form {
    background: linear-gradient(180deg, rgba(9,20,48,.92), rgba(9,20,48,.86));
    border: 1px solid rgba(224,163,60,.55); border-radius: 24px; padding: 30px;
    display: grid; gap: 14px; box-shadow: 0 24px 60px rgba(4,10,28,.42);
  }
  .contact__form label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--gris); display: grid; gap: 6px; }
  .contact__form input, .contact__form select, .contact__form textarea { width: 100%; padding: 13px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(10,22,52,.45); color: #fff; font-family: var(--texte); font-size: 15px; }
  .contact__form textarea { min-height: 110px; resize: vertical; }
  .contact__form select option { color: var(--encre); }
  .contact__form .btn { border: none; cursor: pointer; font-family: var(--texte); }
  .contact__note { font-size: 12.5px; color: var(--gris); margin: 0; }
  .band__cta { display: flex; justify-content: center; margin-top: 38px; }

  /* ── pied de page ── */
  .footer { background: #081430; padding: 54px 0 32px; }
  /* Quatre colonnes en grille : la marque tient la première, un peu plus large,
     et trois rubriques suivent à largeur égale. Il y en avait quatre, plus une
     bande de sites partenaires haute de cinq lignes — le pied de page faisait
     un écran et demi sur téléphone. Ce qui restait (l'agence, les mentions, les
     avis) est descendu sur la ligne du copyright, où on va le chercher. */
  .footer__inner { max-width: min(1280px, 92vw); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 32px 26px; align-items: start; }
  @media (max-width: 960px) { .footer__inner { grid-template-columns: repeat(2, 1fr); } .footer__marque-bloc { grid-column: 1 / -1; } }

  /* ── LA BANDE DES DESTINATIONS ──
     Elle remplace la colonne des dix noms, choisie par Thomas le 1er septembre
     2026 parmi trois maquettes. Toute la largeur, un seul lien, et les dix noms
     lisibles dessous : on sait où l'on va avant de cliquer. Les deux traits
     l'isolent des colonnes au-dessus et des sites de la maison en dessous —
     sans eux, elle se lisait comme une quatrième rubrique. */
  .carte-dest {
    max-width: min(1280px, 92vw); margin: 26px auto 0; padding: 18px 24px; display: flex; align-items: center;
    justify-content: space-between; gap: 24px; text-decoration: none;
    border-top: 1px solid rgba(143,180,248,.15); border-bottom: 1px solid rgba(143,180,248,.15);
    transition: background .18s ease;
  }
  .carte-dest:hover { background: rgba(224,163,60,.07); }
  .carte-dest__mot b { display: block; font-family: var(--titre); font-size: 18px; color: var(--accent); margin-bottom: 5px; }
  .carte-dest__mot em { display: block; font-style: normal; font-size: 12.5px; line-height: 1.7; color: var(--gris); }
  .carte-dest__fleche { flex: none; font-size: 22px; color: var(--accent); transition: transform .18s ease; }
  .carte-dest:hover .carte-dest__fleche { transform: translateX(4px); }
  /* La bande ferme déjà par un trait : les sites de la maison qui suivent n'ont
     pas à en ouvrir un second trente pixels plus bas. Deux traits si proches se
     lisaient comme une rangée vide. */
  /* DANS LA GRILLE, SOUS LES DEUX RUBRIQUES (Thomas, 2 septembre 2026) : la
     colonne de la marque est plus haute que les listes de liens, et l'espace
     sous celles-ci restait vide. La marque s'étend sur deux rangées, la bande
     prend la seconde, colonnes 2 et 3 — elle remplit ce que Thomas a entouré.
     Sous 960 px la grille n'a plus que deux colonnes et tout se réempile. */
  .footer__marque-bloc { grid-row: 1 / 3; }
  .footer__inner .carte-dest { grid-column: 2 / -1; align-self: end; margin: 0 -14px; padding: 16px 14px 6px; border-bottom: 0; border-radius: 12px 12px 0 0; }   /* -14/+14 : le titre s’aligne sur les rubriques */
  @media (max-width: 960px) {
    .footer__marque-bloc { grid-row: auto; }
    .footer__inner .carte-dest { grid-column: 1 / -1; align-self: auto; margin: 8px -24px 0; padding: 18px 24px; border-bottom: 1px solid rgba(143,180,248,.15); border-radius: 0; }
  }

  /* ── Le pied de page se replie sur téléphone ──
     La mécanique est dans `js/commun.js` : les trois rubriques de liens y
     deviennent des `<details>`. Ici, leur habillage. */
  .footer__pli > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
  .footer__pli > summary::-webkit-details-marker { display: none; }
  .footer__pli > summary h4 { margin: 0; }
  .footer__pli > summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent); transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
  .footer__pli[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
  /* Le `display` ne se pose QUE sur un pli ouvert : déclaré sur
     `.footer__pli-liens` tout court, il écrase le masquage interne du
     `<details>` et les quinze liens restent dans le flux, repliés ou non —
     le pied paraissait replié mais gardait sa hauteur. */
  .footer__pli[open] > .footer__pli-liens { display: flex; flex-direction: column; gap: 9px; padding-top: 10px; }
  /* Au-dessus de 620 px le pli n'en est plus un : le titre reprend sa marge,
     le chevron disparaît, et le résumé cesse d'être cliquable — sinon un clic
     sur un titre de colonne refermerait la colonne sur un ordinateur. */
  @media (min-width: 621px) {
    .footer__pli > summary { cursor: default; pointer-events: none; }
    .footer__pli > summary::after { display: none; }
    .footer__pli > summary h4 { margin-bottom: 6px; }
    .footer__pli[open] > .footer__pli-liens { padding-top: 0; }
  }

  /* Sur téléphone, le pied faisait plus de mille pixels : une page entière de
     défilement après la fin du contenu. Les trois rubriques repliées passent
     de 380 px à 90 px, et le reste se resserre de deux points. Aucun lien
     n'est retiré — ils sont dans le HTML, lus par Google, à un doigt du
     lecteur. Les rubriques prennent la largeur entière : côte à côte, un titre
     de deux mots plus son chevron se coupait en quatre lignes. */
  @media (max-width: 620px) {
    .footer { padding: 34px 0 22px; }
    .footer__inner { grid-template-columns: repeat(2, 1fr); gap: 18px 16px; }
    .footer__inner nav { grid-column: 1 / -1; }
    .footer p { font-size: 12.5px; line-height: 1.55; margin-top: 7px; }
    .footer nav a { font-size: 13px; }
    .footer__pli[open] > .footer__pli-liens { gap: 11px; padding-top: 9px; padding-bottom: 4px; }
    .footer__contact { margin-top: 12px; gap: 6px; }
    .footer__contact li { font-size: 12.5px; }
    .carte-dest { margin-top: 16px; padding: 14px 24px; gap: 14px; }
    .carte-dest__mot b { font-size: 16px; }
    .carte-dest__mot em { font-size: 12px; line-height: 1.65; }
    .footer__reseau { margin-top: 14px; padding-top: 12px; }
    .footer__reseau p { font-size: 10.5px; line-height: 1.7; }
    .footer__bas { margin-top: 10px; padding-top: 12px; font-size: 11.5px; gap: 6px 14px; }
    .footer__bas nav { flex-direction: row; gap: 4px 14px; }
  }
  .footer__marque { display: flex; align-items: center; gap: 10px; font-family: var(--titre); font-weight: 700; font-size: 18px; }
  /* Le logo de la marque au bas de page, comme dans le bandeau. 28 px : la
     ligne fait 18 px, le logo la dépasse d'un cheveu sans creuser la colonne.
     `loading=lazy` — le pied de page n'est jamais dans le premier écran. */
  .footer__marque-img { width: 28px; height: 28px; flex: none; display: block; }
  .footer p { color: var(--gris); font-size: 13.5px; line-height: 1.65; max-width: 42ch; margin: 10px 0 0; }
  .footer nav { display: flex; flex-direction: column; gap: 9px; }
  .footer nav a { font-size: 13.5px; transition: color .15s ease, padding-left .15s ease; }
  .footer nav a:hover { padding-left: 4px; }
  .footer nav h4 { font-family: var(--titre); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; font-weight: 700; }
  .footer__contact { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
  .footer__contact li { color: var(--gris); font-size: 13.5px; }

  /* ── les sites de la maison, sur une ligne ──
     Ils occupaient un bloc de cinq lignes décrites, aussi gros que les rubriques
     du site lui-même. Ils tiennent maintenant sur une seule, à la taille du
     copyright mais un cran plus clair que lui : assez lisible pour un lecteur,
     assez discret pour ne pas concurrencer les pages d'Aventurusse. */
  .footer__reseau { max-width: min(1280px, 92vw); margin: 32px auto 0; padding: 16px 24px 0; border-top: 1px solid rgba(143,180,248,.15); }
  @media (max-width: 960px) { .footer__reseau { margin-top: 14px; } }   /* la bande vient de fermer par un trait */
  /* 11 px, plus discret que la mention de droits : cette ligne sert le
     maillage, pas la navigation (Thomas, 2 septembre 2026). */
  .footer__reseau p { max-width: none; margin: 0; font-size: 11px; line-height: 1.8; color: rgba(255,255,255,.5); }
  .footer__reseau p > span:first-child { color: rgba(255,255,255,.4); margin-right: 4px; }
  /* `.footer nav a` impose 13 px aux liens ; ceux-ci suivent leur ligne (11 px). */
  .footer .footer__reseau a { color: inherit; font-weight: 500; font-size: inherit; }
  .footer__reseau a:hover { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

  .footer__bas { max-width: min(1280px, 92vw); margin: 14px auto 0; padding: 16px 24px 0; border-top: 1px solid rgba(143,180,248,.15); color: var(--gris); font-size: 12.5px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
  .footer__bas p { max-width: none; margin: 0; font-size: inherit; color: inherit; }
  .footer__bas nav { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
  /* Le lien vers l'administration n'est plus dans le pied de page depuis le
     2 septembre 2026 (Thomas : « je connais l'accès, pas besoin de tenter des
     gens d'y aller et de casser le site »). `admin.html` se tape à la main. */
  .footer__bas a { color: inherit; font-size: inherit; text-decoration: none; }
  .footer__bas nav a:hover { color: var(--accent); padding-left: 0; text-decoration: underline; text-underline-offset: 2px; }

/* ═══════ LE TÉLÉPHONE, ET UN LECTEUR QUI N'A PLUS VINGT ANS ═══════

   Mesuré le 31 août 2026 sur sept pages en 390 px : le texte courant tombait
   entre 12 et 14,8 px selon les blocs — les listes de « ce qu'on voit », les
   cartes de voyage, les réponses du questionnaire, les avis. Le public de
   l'agence est plutôt âgé : à 14 px sur un écran de téléphone, un paragraphe
   se lit à la loupe, et on ne le lit pas.

   Ce bloc ne touche NI le pied de page (12 px voulus par Thomas, décision du
   27 août), NI les surtitres, NI les étiquettes : seulement le texte qu'on
   lit vraiment. Il est écrit ici ET dans le <style> en ligne des pages, comme
   tout le reste de la maquette — une page qui ne porte pas ces classes ne
   remarque rien.

   Les cibles tactiles suivent la même logique : les puces de rubrique et les
   listes de liens faisaient 26 à 37 px de haut, sous les 44 px recommandés.
   Le padding les agrandit, la marge négative rend la place — la mise en page
   ne bouge pas d'un pixel. */
@media (max-width: 767px) {
  .q > p, .fini > p, .carte-art .corps p, .carte-art p,
  .date-card__corps p, .trust p { font-size: 15.5px; line-height: 1.6; }

  .chemin__voir li, .voir li p, .ville__card p, .voyage__corps p,
  .saisons li p, .avis-card p, .etapes li p, .rappel p, .panneau-prix p,
  .chemin__bascule p, .pratique li p, .deux-listes li,
  .recap li { font-size: 16px; line-height: 1.62; }

  .encadre__note, .news__note, .frise__pied, .credit-photo,
  .signes, .ville__drag, .fil, .contact__note { font-size: 14px; }

  .rubriques a, .filtres a, .autres a, .voisines a {
    min-height: 44px; align-items: center;
  }
  .missions p, .manque p, .etapes p, .lectures p, .porte-cli__boite > p,
  .porte-cli__essai, .porte-cli__retour, .voisines a p,
  .grille-liens a p { font-size: 16px; line-height: 1.62; }
  .porte-cli__intro, .aide-porte, .avis-maquette { font-size: 14px; }
  .fil a { padding: 9px 0; margin: -9px 0; }
}

/* ─── LES TROIS FAÇONS DE NOUS JOINDRE ───
   Reprises du site actuel aventurusse.com, avec ses adresses et ses mots.
   Chacune porte la couleur de son service : c'est ce qui les rend
   reconnaissables d'un coup d'œil, avant meme d'etre lues. Elles sont dans le
   pied de page de TOUTES les pages, y compris celles du blog — Thomas, le
   31 aout 2026 : « c'est plus important que le reste ». */
.joindre { list-style: none; margin: 16px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
/* Trois pastilles rondes de 44 px, le logo blanc dessus, le fond teinté de
   la couleur du service — les mesures et les couleurs sont celles de
   `footer.php` sur aventurusse.com, au centième près. Le libellé n'est plus
   visible : il vit dans `title` et `aria-label`. */
.joindre a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  text-decoration: none; border: 1px solid transparent; color: #fff;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.joindre__ico { width: 22px; height: 22px; flex: none; display: block; }
.joindre__ml .joindre__ico { width: 20px; height: 20px; }
.joindre a:hover { transform: translateY(-2px); color: #fff; }
.joindre__wa { background: rgba(37,211,102,.18); border-color: rgba(37,211,102,.45); }
.joindre__wa:hover { background: rgba(37,211,102,.32); }
.joindre__tg { background: rgba(42,171,238,.18); border-color: rgba(42,171,238,.45); }
.joindre__tg:hover { background: rgba(42,171,238,.32); }
.joindre__ml { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.32); }
.joindre__ml:hover { background: rgba(255,255,255,.22); }
/* Sur la bande rouge, les trois teintes tournent au brun : un vert à dix-huit
   pour cent posé sur du grenat ne fait plus du vert. Les pastilles y prennent
   toutes le blanc translucide — celui du bouton courriel — et le logo, lui,
   reste blanc et reconnaissable. */
.band--rouge .joindre a { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); }
.band--rouge .joindre a:hover { background: rgba(255,255,255,.24); }

/* Les boutons dans une section de page (et non dans le pied) : un peu d'air
   au-dessus, et la liste qui suit se distingue d'eux. */
.joindre--section { margin: 26px 0 6px; }
.joindre--section + .contact__infos { margin-top: 10px; }

/* ═══════ L'ARCHIVAGE AUTOMATIQUE DES VOYAGES ═══════
   `js/commun.js` pose ou retire `hidden` sur les blocs datés (`data-voyage-fin`,
   `data-voyage-passe`). Sans cette règle, un `.voyage` en `display: grid` ou
   un bouton en `display: flex` ignorerait l'attribut. */
[data-voyage-fin][hidden], [data-voyage-passe][hidden] { display: none !important; }

/* ═══════ LES ANCRES DES VOYAGES ARCHIVÉS ═══════
   Chaque circuit retiré du catalogue garde une carte dans
   `anciens-voyages.html`, et c'est vers son ancre que pointent `voyages.url`,
   l'espace client et les redirections de l'ancien site
   (`#soleil-2026`, `#victoire-2026`, `#baikal-2026`, `#sud-2026`). L'en-tête
   du site est fixe : sans cette marge, l'ancre pose le titre de la carte
   dessous. Même valeur que les ancres d'article. */
.voyage[id] { scroll-margin-top: 96px; }

/* ═══════ LES RETOURS À LA LIGNE, ET LA LARGEUR DU TEXTE ═══════

   TROIS DEMANDES DE THOMAS EN DEUX JOURS, ET LA DEUXIÈME A DÉFAIT LA PREMIÈRE.

   Le 3 septembre 2026 : « les textes cassent en retours à la ligne laids ».
   Réponse : `text-wrap: pretty` sur tout le texte courant. Les lignes veuves
   ont disparu — 174 relevées, 4 restantes — mais `balance` égalise en
   RÉTRÉCISSANT le bloc : un paragraphe qui remplissait sa colonne n'en prenait
   plus que 60 %, et laissait un trou à droite. Thomas, capture d'écran à
   l'appui : « à 60 % du texte il fait un saut à la ligne, c'est horrible
   visuellement », « chaque texte doit faire la taille prévue sur l'écran ».

   D'OÙ LA RÈGLE D'AUJOURD'HUI, en deux moitiés qui ne se contredisent pas :

   — LES TITRES gardent `balance`. Un titre fait une ou deux lignes, il est seul
     sur la sienne, et personne ne lit un trou à droite d'un titre. C'est lui
     qui réglait « Un compte russe s'ouvre en un jour — quand le dossier est
     prêt », coupé après « est » et laissant « prêt » seul.

   — LE TEXTE COURANT reprend `pretty`, qui ne rétrécit rien : il ne fait que
     remonter un mot resté seul en bas, quand il le peut. Il en laisse passer,
     et c'est assumé — un paragraphe qui remplit sa colonne avec une dernière
     ligne courte se lit mieux qu'un pavé de 60 % de large.

   ET LES BRIDES DE LARGEUR SONT LEVÉES. `.band__sub`, `.tete p` et `.intro p`
   étaient retenus à 86 ou 92 caractères — 920 px dans une bande de 1 280. Le
   confort de lecture veut une ligne de 60 à 90 signes ; Thomas veut que le
   texte occupe la place prévue, il l'a redit deux fois, et c'est sa page.
   Les colonnes d'article (`.corps-art`, 800 px) suivent : il les cite
   nommément, « chaque article et chaque dossier, qui ne sont pas larges par
   ailleurs ». */
p, li, dd, dt, figcaption, blockquote, summary { text-wrap: pretty; }
h1, h2, h3, h4, .band__title { text-wrap: balance; }