/* =============================================================
   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;
    --sourdine:#6f7566;
    --trait:#ddd8cb;
    --sable:#f4f0e6;
    --sable-fonce:#e8e2d3;
    --kaki:#3d4a3a;
    --kaki-clair:#e6ebe2;
    --kaki-sombre:#2a3428;
    --manche:#4a6572;
    --ocre:#b5762c;
    --ocre-clair:#faf1e3;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
  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}
  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}
  .logo img{height:3rem;width:auto;flex:none}
  @media(max-width:699px){.logo img{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. */
  .logo .produit{font-family:system-ui,sans-serif;font-weight:600;font-size:.95rem;
                 line-height:1.15;letter-spacing:-.01em;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 .produit{font-size:.88rem;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. */
  @media(max-width:560px){.logo{gap:.25rem}}
  .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}
  .devises a{padding:.2rem .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);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}
  .globe{display:flex;align-items:center;gap:.35rem;flex:none;
         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:auto;font-family:system-ui,sans-serif;font-size:.85rem;
              font-weight:600;background:var(--ocre);color:#fff;text-decoration:none;
              padding:.55rem 1.1rem;border-radius:999px;white-space:nowrap}
  .barre .cta:hover{background:#9c6524}
  @media(min-width:900px){
    .menu{display:flex}
    .barre .tel{display:inline;margin-left:0}
    .barre .cta{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);color:#fff}
  .bouton.primaire:hover{background:#9c6524}
  .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 ---------- */
  .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)}
  footer .bas{border-top:1px solid rgba(255,255,255,.15);margin-top:2rem;padding-top:1.25rem;
              font-size:.78rem;opacity:.7}