/* =============================================================
   commun.css — ce que toutes les pages partagent

   Palette, typographie, barre du haut, fenêtre de choix de la
   langue et de la devise, bande de réassurance, pied de page.

   Les pages de vente ajoutent leurs propres styles : bandeau
   d'ouverture, calendrier, panneau de réservation. Ce qui vit
   ici est ce que l'accueil et les pages légales reprennent
   aussi.
   ============================================================= */

/* Palette côte normande : sable, kaki, bleu Manche */
  :root{
    --encre:#22281f;
    /* Le gris des textes secondaires. Assombri de 10 % : à sa valeur
       d'origine, #6f7566, il tombait à 4,18:1 sur le sable des
       sections claires et 3,93:1 sur le kaki clair des pastilles —
       le seuil des textes est de 4,5.

       La variable elle-même plutôt que chaque règle : elle sert
       partout, et l'écart visuel est infime. */
    --sourdine:#63695b;
    --trait:#ddd8cb;
    --sable:#f4f0e6;
    --sable-fonce:#e8e2d3;
    --kaki:#3d4a3a;
    --kaki-clair:#e6ebe2;
    --kaki-sombre:#2a3428;
    --manche:#4a6572;
    --ocre:#b5762c;

    /* Le même ocre, assombri : blanc dessus, il passe de 3,76:1 à
       4,88:1 — le seuil des textes est de 4,5.

       Une variable à part plutôt qu'un ocre unique : celui du dessus
       sert aussi de couleur de texte et de liseré sur fond clair, où
       l'assombrir n'apporterait rien.

       C'est la teinte que le survol employait déjà : le bouton ne
       change pas de famille, il prend la valeur conforme. */
    --ocre-bouton:#9c6524;

    /* Le survol, un cran plus sombre encore : #9c6524 étant devenu
       la couleur de repos, garder l'ancien survol aurait rendu les
       boutons insensibles au pointeur. */
    --ocre-survol:#83541e;

    /* L'ocre en texte. Sur fond clair il tombait à 3,30:1 — le seuil
       est de 4,5 — et cela touchait les surtitres de section, le lien
       « voir les autres options », les mentions du panneau.

       Cette valeur passe sur les trois fonds du site : le blanc, le
       sable des sections claires et le kaki clair des pastilles.
       Trois variables d'ocre, donc : le fond des boutons, leur
       survol, et le texte. Chacune a ses contraintes. */
    --ocre-texte:#8e5d22;

    /* Et l'ocre éclairci, pour le texte sur le panneau kaki sombre :
       le nominal n'y atteint que 3,45:1, et l'assombrir aggraverait.
       Sur fond sombre il faut monter, non descendre. */
    --ocre-sur-sombre:#d58b33;

    /* La hauteur du bandeau d'agence. Fixée plutôt que déduite du
       texte : la barre de navigation s'y cale au millimètre, et une
       valeur estimée laisserait une fente au défilement.

       Sur petit écran le contenu passe à la ligne : la valeur suit,
       et les deux restent d'accord. */
    --h-agent:2.3rem;
    --ocre-clair:#faf1e3;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:4.5rem}

  /* Le bandeau d'agence s'ajoute à la barre : sans cela, une ancre
     se calerait sous lui.

     Sur « html », non sur « body » : c'est l'élément qui défile. */
  html:has(.bandeau-agent){scroll-padding-top:calc(4.5rem + var(--h-agent))}
  body{margin:0;font:16px/1.65 Georgia,"Iowan Old Style",serif;color:var(--encre);
       background:#fff;overflow-x:hidden}
  img{max-width:100%;height:auto;display:block}

  /* Lu par les lecteurs d'écran, invisible à l'œil.

     Sert là où une information visuelle se passe de mots — un
     squelette de chargement, une icône seule — mais où quelqu'un qui
     n'y voit pas a besoin qu'on la lui dise.

     « display:none » ne conviendrait pas : les lecteurs d'écran
     l'ignorent aussi. */
  .lu-seulement{position:absolute;width:1px;height:1px;overflow:hidden;
                clip-path:inset(50%);white-space:nowrap}
  a{color:var(--kaki)}
  h1,h2,h3,.sans{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}

  .wrap{max-width:1240px;margin:0 auto;padding:0 1.5rem}

  /* Sur téléphone, ces marges coûtent plus qu'elles n'apportent : la
     barre du haut y perd de quoi afficher le nom de l'excursion. */
  @media (max-width:560px){ .wrap{padding:0 1rem} }

  
/* ---------- Navigation collante ---------- */
  .barre{
    position:sticky;top:0;z-index:40;background:rgba(255,255,255,.96);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--trait);
  }
  .barre .wrap{display:flex;align-items:center;gap:1rem;height:4.5rem;min-width:0}
  .logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--encre);
        flex:0 1 auto;min-width:0}
  /* Le rapport est verrouillé sur les dimensions déclarées : sans
     lui, la largeur réservée avant le chargement du SVG vient de ces
     attributs, et celle d'après vient du fichier. Les deux diffèrent,
     et le nom à côté se décalait puis revenait à sa place. */
  /* Le rapport n'est verrouillé que sur la balise : c'est elle qui
     arrive en retard et décale ce qui suit. Le SVG inscrit est peint
     avec le document, et lui imposer un rapport qui n'est pas le sien
     centrait le dessin dans une boîte trop large — d'où un vide à
     gauche. Il garde donc celui de son viewBox. */
  .logo img{height:3rem;width:auto;flex:none;aspect-ratio:110/34}
  .logo .logo-marque svg{height:3rem;width:auto;flex:none;display:block}
  .logo .logo-marque{display:flex;flex:none}
  @media(max-width:699px){.logo img,.logo .logo-marque svg{height:2.6rem}}
  /* Le nom du produit, seul à côté du logo. Il reste lisible à
     toutes les tailles : c'est la seule chose dans la barre qui
     dise ce qu'on regarde. */
  /* Les capitales viennent du style, non de la saisie : « Your
     booking » et un nom d'excursion écrit en minuscules s'y
     alignent, et les langues qui n'ont pas de majuscules — chinois,
     japonais — ne changent pas.

     L'interlettrage compense : des capitales serrées se lisent
     moins bien que des bas-de-casse. */
  .logo-bloc .produit{font-family:system-ui,sans-serif;font-weight:600;font-size:.9rem;
                 line-height:1.15;text-transform:uppercase;letter-spacing:.03em;
                 color:var(--encre);
                 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
                 padding-left:.75rem;margin-left:.1rem;
                 border-left:1px solid var(--trait)}
  @media(max-width:479px){.logo-bloc .produit{font-size:.84rem;padding-left:.6rem}}

  /* Sur téléphone, chaque pixel gagné va au nom de l'excursion, que
     la barre coupait. Après la règle générale : à spécificité égale,
     c'est la dernière écrite qui l'emporte. */

  /* Le chevron des excursions voisines.

     Le conteneur reprend les propriétés de souplesse que portait le
     lien : c'est lui qui se comprime maintenant, et le nom garde son
     ellipse. Il sert aussi de repère à la liste, posée en absolu. */
  .logo-bloc{position:relative;display:flex;align-items:center;gap:.75rem;
             flex:0 1 auto;min-width:0}

  /* Sur téléphone, chaque pixel gagné va au nom de l'excursion, que
     la barre coupait. Après la règle générale : à spécificité égale,
     c'est la dernière écrite qui l'emporte. */
  @media(max-width:560px){.logo-bloc{gap:.25rem}}

  /* Le nom et le chevron ne font qu'un bouton : la cible tactile est
     le nom lui-même, largement au-delà des 44 px, et le signe seul
     n'aurait pas suffi. */
  .produit-bouton{display:flex;align-items:center;gap:.3rem;min-width:0;
                  border:0;background:none;padding:.35rem 0;margin:0;
                  font:inherit;color:inherit;cursor:pointer;border-radius:6px}
  .produit-bouton:hover .produit,
  .produit-bouton:focus-visible .produit{color:var(--ocre-texte)}
  .produit-bouton:hover .produit-chevron,
  .produit-bouton:focus-visible .produit-chevron{color:var(--ocre-texte)}

  .produit-chevron{flex:none;color:var(--sourdine);transition:transform .2s ease}
  .produit-bouton[aria-expanded="true"] .produit-chevron{transform:rotate(180deg)}

  .sites-voisins[hidden]{display:none}
  /* Ancrée à gauche, mais jamais au-delà du bord de l'écran.

     Le conteneur est aussi étroit que le nom du site. Alignée sur
     son bord droit, la liste débordait vers la gauche dès que le nom
     était court — « Paris » sortait de l'écran. Alignée à gauche,
     elle sortirait à droite avec un nom long.

     La largeur maximale la borne à la fenêtre, moins la gouttière de
     la barre de chaque côté ; « max-width » l'emporte alors sur le
     minimum, qui ne s'applique que s'il y a la place. */
  .sites-voisins{position:absolute;top:calc(100% + .4rem);left:0;z-index:50;
                 margin:0;padding:.35rem;list-style:none;min-width:12rem;
                 max-width:calc(100vw - 2rem);
                 background:#fff;border:1px solid var(--trait);border-radius:10px;
                 box-shadow:0 8px 24px rgba(34,40,31,.14);
                 font-family:system-ui,sans-serif;font-size:.88rem}
  .sites-voisins a{display:block;padding:.5rem .65rem;border-radius:7px;
                   color:var(--encre);text-decoration:none;
                   overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sites-voisins a:hover,
  .sites-voisins a:focus-visible{background:var(--ocre-clair);color:var(--ocre-texte)}
  .menu{display:none;gap:1.4rem;margin-left:auto;font-family:system-ui,sans-serif;font-size:.88rem}
  .menu a{color:var(--sourdine);text-decoration:none}
  .menu a:hover{color:var(--kaki)}
  /* Le téléphone est masqué sous 900 px : il pousse la barre hors
     de l'écran et provoque un défilement horizontal. Il reste
     accessible dans la section contact et le pied de page. */
  .barre .tel{display:none;font-family:system-ui,sans-serif;font-size:.85rem;text-decoration:none;
              color:var(--kaki);font-weight:600;white-space:nowrap}
  .devises{display:flex;gap:.15rem;font-family:system-ui,sans-serif;font-size:.75rem;
           background:var(--sable);border-radius:999px;padding:.15rem;flex:none}
  /* .3rem plutôt que .2rem : à 22 px de haut, ces pastilles passaient
     tout juste sous le seuil des zones tactiles. PageSpeed ne les a
     pas relevées, mais elles se touchent du même doigt. */
  .devises a{padding:.3rem .55rem;border-radius:999px;color:var(--sourdine);
             text-decoration:none;font-weight:600}
  .devises a.actif,
  .devises span.actif{background:var(--kaki);color:#fff}
  .devises span{padding:.2rem .55rem;border-radius:999px;font-weight:600;cursor:default}

  /* Les sélecteurs du pied de page : présents à toutes les tailles,
     indispensables sur mobile où la barre ne les porte plus.
     « align-items:start » parce que ce bloc est une cellule de la
     grille du pied : étiré sur la hauteur de la rangée, il étirait
     les pastilles avec lui. */
  .pied-choix{display:flex;align-items:start;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
  footer .devises{background:rgba(255,255,255,.1)}
  footer .devises a{color:rgba(255,255,255,.7)}
  footer .devises a:hover{color:#fff}
  footer .devises .actif{background:var(--ocre-bouton);color:#fff}

  /* Un bouton unique plutôt que deux séries de pastilles : à
     cinq éléments, la barre devenait dense et le logo se réduisait.
     Le choix se fait dans une modale, où chaque langue a son nom
     complet — plus clair qu'un code de deux lettres. */
  .barre .devises{display:none}
  /* La marge automatique passe au premier des boutons de droite :
     sous 900 px, le menu et le téléphone sont masqués, et le globe
     suivait alors le nom du site — sa position variait avec la
     longueur de celui-ci. Ancré à droite, il ne bouge plus. */
  .globe{display:flex;align-items:center;gap:.35rem;flex:none;margin-left:auto;
         background:none;border:0;padding:.3rem .4rem;cursor:pointer;
         font-family:system-ui,sans-serif;font-size:.78rem;font-weight:600;
         color:var(--kaki);line-height:1.1;border-radius:6px}
  .globe:hover{background:var(--sable)}
  .globe svg{flex:none}
  .globe span{white-space:nowrap}

  /* ---------- Modale langue et devise ---------- */
  .modale-choix{position:fixed;inset:0;z-index:120;display:flex;
                align-items:center;justify-content:center;padding:1.2rem}
  .modale-choix[hidden]{display:none}
  .modale-choix-fond{position:absolute;inset:0;background:rgba(34,40,31,.45)}
  .modale-choix-carte{position:relative;background:#fff;border-radius:14px;
                      padding:1.6rem 1.5rem 1.4rem;width:100%;max-width:22rem;
                      box-shadow:0 20px 50px rgba(0,0,0,.25);
                      max-height:85vh;overflow-y:auto}
  .modale-choix-fermer{position:absolute;top:.7rem;right:.8rem;background:none;
                       border:0;font-size:1.1rem;color:var(--sourdine);cursor:pointer;
                       line-height:1;padding:.2rem}
  .modale-choix-fermer:hover{color:var(--encre)}

  .choix-titre{font-family:system-ui,sans-serif;font-size:.7rem;font-weight:700;
               text-transform:uppercase;letter-spacing:.08em;color:var(--sourdine);
               margin:0 0 .5rem}
  .choix-titre + .choix-liste{margin-bottom:1.3rem}
  .choix-liste{display:flex;flex-direction:column;gap:.3rem}
  .choix-liste:last-child{margin-bottom:0}

  /* Chaque option est une cible large : sur mobile, un lien étroit
     se rate une fois sur trois. */
  .choix{display:block;padding:.7rem .9rem;border-radius:8px;text-decoration:none;
         font-family:system-ui,sans-serif;font-size:.92rem;color:var(--encre);
         background:var(--sable)}
  .choix:hover{background:var(--sable-fonce);color:var(--encre)}
  .choix.actif{background:var(--kaki);color:#fff;font-weight:600}
  .barre .cta{flex:none;margin-left:0;font-family:system-ui,sans-serif;font-size:.85rem;
              font-weight:600;background:var(--ocre-bouton);color:#fff;text-decoration:none;
              padding:.55rem 1.1rem;border-radius:999px;white-space:nowrap}
  .barre .cta:hover{background:var(--ocre-survol)}

  /* « Connexion », sur l'espace professionnel. Un bouton clair : il
     ne doit pas concurrencer « Réserver », qui reste l'action
     principale même pour une agence. */
  .barre .cta-clair{background:none;color:var(--encre);
                    border:1px solid var(--trait)}
  .barre .cta-clair:hover{background:var(--sable);color:var(--encre)}

  /* Le panier remplace « Réserver » dès qu'il contient quelque
     chose. Le compte le suit, dans une pastille claire : c'est un
     état, non une invitation. */
  .barre .cta-panier{display:inline-flex;align-items:center;gap:.45rem}

  /* « hidden » pose « display:none », mais une règle de display
     l'emporte sur lui : sans cette ligne, les deux boutons
     paraissent en même temps. */
  .barre .cta[hidden]{display:none}
  .barre .cta-panier b{display:inline-flex;align-items:center;
    justify-content:center;min-width:1.15rem;height:1.15rem;padding:0 .3rem;
    border-radius:999px;background:rgb(255 255 255 / 22%);
    font-size:.75rem;font-weight:700}
  @media(min-width:900px){
    /* Au-delà, le menu reprend la marge automatique : il ouvre le
       groupe de droite, et le globe le suit sans s'en détacher. */
    .menu{display:flex}
    .barre .tel{display:inline;margin-left:0}
    .globe{margin-left:0}
  }

  
  .bouton{display:inline-block;font-family:system-ui,sans-serif;font-weight:600;font-size:.95rem;
          padding:.85rem 1.6rem;border-radius:999px;text-decoration:none;border:0;cursor:pointer}
  .bouton.primaire{background:var(--ocre-bouton);color:#fff}
  .bouton.primaire:hover{background:var(--ocre-survol)}
  .bouton.secondaire{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.4)}
  .bouton.secondaire:hover{background:rgba(255,255,255,.25)}


  /* ---------- Bandeau de réassurance ---------- */
  /* ---------- Fil d'Ariane ---------- */
  /* En tête de la colonne de lecture, non dans une bande à lui :
     une barre pleine largeur entre la photo et le bandeau coupait
     l'élan pour dire peu de chose.

     Ici, il ouvre le texte sans l'interrompre. */
  .ariane{font-family:system-ui,sans-serif;font-size:.78rem}
  .ariane ol{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
             list-style:none;margin:0 0 1.5rem;padding:0}
  .ariane li{display:flex;align-items:center;gap:.4rem;color:var(--sourdine)}
  /* Le chevron sépare les échelons sans être lu par les lecteurs
     d'écran : il vit dans le style, non dans le texte. */
  .ariane li + li::before{content:'\203A';color:var(--trait);font-size:.95rem}
  .ariane a{color:var(--sourdine);text-decoration:none}
  .ariane a:hover{color:var(--kaki);text-decoration:underline}
  /* La page courante ne s'affiche pas en gras : elle est déjà le
     titre juste dessous, et le répéter appuyé n'apprend rien. */
  .ariane [aria-current]{color:var(--sourdine)}

  .rassure{background:var(--kaki);color:#fff;font-family:system-ui,sans-serif}
  .rassure .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
                 gap:1.25rem;padding:1.5rem 1.25rem}
  .rassure div{font-size:.88rem}
  .rassure b{display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
             opacity:.7;margin-bottom:.15rem}


  footer{background:var(--kaki-sombre);color:rgba(255,255,255,.75);font-family:system-ui,sans-serif;
         font-size:.85rem;padding:3rem 0 2rem}
  footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2rem}
  footer h3{color:#fff;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .6rem}
  footer .logo-pied{height:3.2rem;width:auto;margin-bottom:1rem}
  footer a{color:rgba(255,255,255,.85)}

  /* Les liens du pied — le sommaire de la page, les mentions
     légales — s'empilent dans un <p>, séparés par des <br>. Ils
     suivaient donc le rythme du texte, une vingtaine de pixels par
     lien, quand la règle des zones tactiles en demande vingt-quatre :
     sur un téléphone, deux liens si proches se touchent du même
     doigt.

     Le retrait vertical plutôt qu'une hauteur fixe : le lien garde
     sa taille de texte, seule sa zone sensible s'élargit.

     Le pied de bas de page en est exclu — son texte n'est pas
     cliquable — comme le téléphone et le WhatsApp, seuls sur leur
     ligne. */
  footer .wrap > div > p a{display:inline-block;padding-block:.45rem}

  /* L'interligne resserré compense le retrait : sans cela l'écart
     est compté deux fois — une fois par le <br>, une fois par la
     zone sensible — et les colonnes du pied s'étirent.

     Le compte : 0,85rem de texte plus deux fois 0,45 font 29 px,
     assez au-dessus des 24 requis pour qu'un arrondi de rendu ne
     fasse pas basculer. */
  footer .wrap > div > p:has(a){line-height:1}
  footer .bas{border-top:1px solid rgba(255,255,255,.15);margin-top:2rem;padding-top:1.25rem;
              font-size:.78rem;opacity:.7}
/* ---------- Le bandeau d'une agence connectée ----------

   Une agence connectée réserve sous son nom : le bandeau le dit sur
   toutes les pages. Sans lui, on ne saurait pas sous quel nom on
   réserve, et une commande passée par mégarde depuis une session
   ouverte serait attribuée — puis facturée — à l'agence.

   Le kaki du panneau de réservation, pour qu'il appartienne au site
   sans se confondre avec la navigation. */
/* Collé au-dessus de la barre, qui l'est aussi.

   C'est en bas de page qu'on réserve : le rappel doit y être
   encore. Un bandeau qui défile aurait disparu au moment où il
   compte le plus.

   L'ocre plutôt que le kaki : sur le blanc de la barre, le kaki
   passait presque inaperçu. Pas de rouge — être connecté en tant
   qu'agence est un état normal, non un incident. Mais un état qu'il
   faut voir, puisqu'il décide de qui réserve.

   Le « z-index » passe au-dessus de celui de la barre — 40 — pour
   que l'ombre de celle-ci ne le recouvre pas. */
.bandeau-agent{position:sticky;top:0;z-index:41;
               display:flex;align-items:center;justify-content:center;
               flex-wrap:wrap;gap:.4rem 1rem;
               background:var(--ocre-bouton);color:#fff;
               padding:0 1rem;font-size:.85rem;font-weight:500;
               height:var(--h-agent)}

@media(max-width:520px){
  :root{--h-agent:3.9rem}
  .bandeau-agent{flex-direction:column;justify-content:center;gap:.1rem}
}

/* La barre se cale sous lui : sans cela elle remonterait en haut et
   le masquerait au défilement. */
body:has(.bandeau-agent) .barre{top:var(--h-agent)}

/* L'icône est décorative — « aria-hidden » dans le balisage — donc
   le contraste y importe moins. Elle reste tout de même lisible. */
.bandeau-agent i{color:rgb(255 255 255 / 85%);margin-right:.3rem}
.bandeau-agent b{font-weight:600}

/* Le numéro de l'agence, discret à côté du nom : deux agences
   peuvent porter des noms proches, et c'est lui qu'on donne au
   téléphone. */
.bandeau-agent-num{font-size:.76rem;opacity:.75;
                   font-variant-numeric:tabular-nums}
.bandeau-agent-num::before{content:'#'}

.bandeau-agent form{margin:0}

/* Un lien plutôt qu'un bouton à l'œil : se déconnecter est un geste
   secondaire, il n'a pas à peser autant que « Réserver ». */
.bandeau-agent button{background:none;border:0;padding:0;
                      font:inherit;font-size:.82rem;font-weight:400;
                      /* Blanc plein : toute transparence ramenait le
                         contraste sous les 4,5 requis sur cet ocre. */
                      color:#fff;
                      text-decoration:underline;cursor:pointer}
.bandeau-agent button:hover{text-decoration-thickness:2px}

/* Il ne s'imprime pas : le client emporte sa confirmation, pas
   l'état de notre session. */
@media print{ .bandeau-agent{display:none} }

/* ---------- La connexion des agences ----------

   Sur l'espace professionnel seulement. Deux champs ne valent pas
   une page : l'agence garde ce qu'elle regardait, et y revient une
   fois connectée.

   Même dessin que la modale de langue, dont elle reprend la
   mécanique. */
.modale-agent{position:fixed;inset:0;z-index:200;
              display:flex;align-items:center;justify-content:center;
              padding:1.5rem}
.modale-agent[hidden]{display:none}

.modale-agent-fond{position:absolute;inset:0;background:rgba(0,0,0,.45)}

.modale-agent-carte{position:relative;background:#fff;border-radius:14px;
                    padding:1.6rem 1.5rem 1.4rem;width:100%;max-width:22rem;
                    box-shadow:0 20px 50px rgba(0,0,0,.25)}

.modale-agent-fermer{position:absolute;top:.7rem;right:.8rem;background:none;
                     border:0;font-size:1.1rem;line-height:1;cursor:pointer;
                     color:var(--sourdine);padding:.3rem}
.modale-agent-fermer:hover{color:var(--encre)}

.modale-agent-oeil{font-size:.7rem;letter-spacing:.14em;font-weight:700;
                   text-transform:uppercase;color:var(--ocre-texte);
                   margin:0 0 .3rem;font-family:system-ui,sans-serif}

.modale-agent-carte h2{font-size:1.3rem;font-weight:400;margin:0 0 1.2rem;
                       line-height:1.2}

.modale-agent-champ{margin-bottom:.9rem}
.modale-agent-champ label{display:block;font-family:system-ui,sans-serif;
                          font-size:.85rem;font-weight:600;
                          margin-bottom:.3rem}
.modale-agent-champ input{width:100%;font:inherit;font-size:.95rem;
                          border:1px solid var(--trait);border-radius:8px;
                          padding:.6rem .7rem}
.modale-agent-champ input:focus{outline:2px solid var(--kaki);
                                outline-offset:-1px}

.modale-agent-carte form > button{width:100%;background:var(--ocre-bouton);
                                  color:#fff;border:0;border-radius:999px;
                                  padding:.75rem;font-family:system-ui,sans-serif;
                                  font-size:.95rem;font-weight:600;
                                  cursor:pointer;margin-top:.4rem}
.modale-agent-carte form > button:hover{background:var(--ocre-survol)}
.modale-agent-carte form > button:disabled{opacity:.6;cursor:default}

/* Le message d'échec. « pre-line » garde le retour à la ligne de
   « Trop de tentatives », qui se lit mieux en deux temps. */
.modale-agent-mot{background:#fef2f2;color:#991b1b;border-radius:8px;
                  padding:.7rem .9rem;margin:0 0 1rem;
                  font-family:system-ui,sans-serif;font-size:.85rem;
                  line-height:1.5;white-space:pre-line}
.modale-agent-mot[hidden]{display:none}

/* Le mot de réussite, le temps que la page se recharge. La carte
   garde sa taille : sans cela elle se rétracterait d'un coup, et
   le clignement serait plus gênant que l'attente. */
.modale-agent-fait{display:flex;flex-direction:column;align-items:center;
                   justify-content:center;gap:.15rem;text-align:center;
                   min-height:12.5rem;margin:0;
                   font-family:system-ui,sans-serif;font-size:.95rem;
                   color:var(--encre)}

/* La pastille : le premier « span » seulement. Le second porte la
   phrase, et l'habiller en rond la découperait. */
.modale-agent-fait > span:first-child{display:flex;align-items:center;
                        justify-content:center;
                        width:2.4rem;height:2.4rem;border-radius:50%;
                        background:#ecfdf5;color:#065f46;
                        font-size:1.2rem;margin-bottom:.5rem}

/* La phrase, sur une ligne. En « flex » colonne chaque enfant
   devient un bloc : sans cela « Conectado como » et le nom se
   retrouvaient l'un sous l'autre, puis collés. */
.modale-agent-fait .dit{display:block;line-height:1.4}

.modale-agent-fait b{font-weight:600}

/* La déconnexion n'est pas une réussite mais un passage : le vert
   de la connexion y dirait autre chose. */
#modale-sortie .modale-agent-fait > span:first-child{
                                       background:var(--sable);
                                       color:var(--sourdine)}

#modale-sortie .modale-agent-jauge::after{background:var(--sourdine)}

.modale-agent-fait small{font-size:.8rem;color:var(--sourdine);
                         margin-top:.3rem}

/* La barre qui se vide, le temps que la page reparte.

   Sa durée et celle du « setTimeout » doivent rester d'accord : deux
   secondes de part et d'autre. */
.modale-agent-jauge{display:block;font-style:normal;
                    width:10rem;height:3px;margin-top:1rem;
                    background:var(--sable-fonce);border-radius:999px;
                    overflow:hidden;position:relative}

.modale-agent-jauge::after{content:'';position:absolute;inset:0;
                           background:var(--kaki);border-radius:999px;
                           transform-origin:left;
                           animation:modale-agent-vide 2s linear forwards}

@keyframes modale-agent-vide{
  from{transform:scaleX(1)}
  to  {transform:scaleX(0)}
}

/* Qui supporte mal les animations voit une barre pleine, immobile :
   le message reste, seule l'attente ne se montre plus. */
@media(prefers-reduced-motion:reduce){
  .modale-agent-jauge::after{animation:none}
}

.modale-agent-pied{font-family:system-ui,sans-serif;font-size:.8rem;
                   color:var(--sourdine);line-height:1.55;
                   margin:1.2rem 0 0;text-align:center}

/* Un bouton, non un lien : il ouvre la modale. Le dessin reste
   celui de « cta-clair ». */
.barre button.cta{font-family:system-ui,sans-serif;cursor:pointer}