/* =====================================================================
   Le Painséum — direction artistique V2
   Couche appliquée par-dessus style.css / pro.css.
   Ivoire, encre, un seul bleu roi en aplat. Deux typographies.
   Aucun dégradé, aucune ombre, aucun arrondi, aucune carte.
   ===================================================================== */

:root{
  --bleu:#0E2773;
  --bleu-nuit:#0A1E5C;
  --bleu-vif:#0E2773;
  --bleu-doux:rgba(244,241,234,.6);
  --bleu-voile:#EFE9DE;
  --bleu-brume:#F3EFE7;

  --encre:#14171F;
  --papier:#FBF8F2;
  --papier-chaud:#FBF8F2;
  --sourdine:#8C877C;

  --ivoire:#FBF8F2;
  --grege:#EFE9DE;
  --clair:#F4F1EA;
  --filet:rgba(14,39,115,.16);

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Jost",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gouttiere:clamp(20px,5vw,64px);
  --air:clamp(84px,13vh,176px);
}

/* ---------- socle ---------- */
html,body{background:var(--ivoire)}
body{
  color:var(--encre);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
p,li,td,th,dd,dt,figcaption,summary,label,input,select,textarea,button{font-family:var(--sans)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(3.1rem,9.5vw,7rem);line-height:.9}
h2{font-size:clamp(2.1rem,5.2vw,4rem);line-height:.99}
h3{font-size:clamp(1.3rem,2.3vw,1.8rem);line-height:1.14}
a{color:var(--bleu)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:2px solid var(--bleu);outline-offset:4px;border-radius:0;
}
img{border-radius:0!important;box-shadow:none!important}

.env{max-width:1180px;padding-inline:var(--gouttiere)}
.bloc-section{padding-block:var(--air)}
.mention{color:var(--sourdine);font-size:.92rem}

.oeil,.sur-titre,.info-titre,.num,.etape-num,.p-mini{
  font-family:var(--sans);font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  font-size:.68rem;color:var(--sourdine);
}
.oeil-clair{color:rgba(244,241,234,.6)}
.intro-large,.heros-texte,.legende-texte{
  font-size:clamp(1.05rem,1.5vw,1.28rem);line-height:1.6;max-width:36em;
}
.h1-sous{font-family:var(--sans);font-weight:400}

/* ---------- fonds ---------- */
.fond-blanc{background:var(--ivoire)}
.fond-pale{background:var(--grege)}
.fond-pale-inverse{background:var(--ivoire)}
.fond-bleu{background:var(--bleu);color:var(--clair)}
.fond-bleu h2,.fond-bleu h3,.h2-clair{color:var(--clair)}
.fond-bleu p,.texte-clair{color:rgba(244,241,234,.8)}

/* ---------- en-tête ---------- */
.entete{background:var(--bleu);border:0;box-shadow:none;position:sticky;top:0;z-index:20}
.entete-in{min-height:64px;gap:clamp(14px,2.6vw,34px)}
.marque img{height:34px}
.nav-principale{gap:clamp(10px,1.7vw,22px);flex-wrap:nowrap}
.nav-principale a{
  font-size:.63rem;font-weight:400;letter-spacing:.17em;color:rgba(244,241,234,.72);
  border:0;padding:0;
}
.nav-principale a:hover{color:var(--clair);border:0}
.lien-pro{color:var(--clair)!important}
.tel-entete{color:var(--clair);font-size:.74rem;letter-spacing:.06em}
.entete-fin{display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);margin-left:clamp(12px,2.4vw,32px)}
.langues a{
  font-size:.62rem;font-weight:500;letter-spacing:.14em;color:rgba(244,241,234,.5);
  padding:.3em .42em;background:none!important;border-radius:0;
}
.langues a:hover,.langues a[aria-current]{color:var(--clair);background:none!important}

/* ---------- héros ---------- */
.heros{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--bleu);color:var(--clair);text-align:center;
  padding-block:clamp(90px,16vh,168px) clamp(104px,19vh,180px);
}
.heros::before,.heros::after{display:none!important}
.heros-in{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:clamp(24px,4vh,46px)}
.heros h1{color:var(--clair)}
.heros h1 em{font-style:italic;display:block;color:rgba(244,241,234,.82)}
.heros-logo{width:clamp(56px,7vw,88px);height:auto}
.heros .sur-titre{color:rgba(244,241,234,.55)}
.heros-texte{color:rgba(244,241,234,.78)}

.ciel{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--bleu);isolation:isolate}
.vue{
  position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;
  filter:grayscale(1) contrast(1.04);mix-blend-mode:luminosity;
  opacity:0;transform:scale(1.03);will-change:opacity,transform;
}
.vue:first-child{opacity:.62}
.voile{position:absolute;inset:0;z-index:2;background:rgba(14,39,115,.30);pointer-events:none}
.anim .vue{opacity:0;animation:parade 44s linear infinite}
.anim .vue:nth-child(2){animation-delay:11s}
.anim .vue:nth-child(3){animation-delay:22s}
.anim .vue:nth-child(4){animation-delay:33s}
@keyframes parade{
  0%{opacity:0;transform:scale(1.03)}
  4%{opacity:.62}
  22%{opacity:.62}
  27%{opacity:0;transform:scale(1.11)}
  100%{opacity:0;transform:scale(1.11)}
}

/* bandeau de mots sous le héros : simple filet, plus de bandeau coloré */
.heros-bande{
  background:var(--ivoire);color:var(--sourdine);
  border-bottom:1px solid var(--filet);
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;padding-block:18px;
}

/* ---------- bouton son ---------- */
.son{
  position:absolute;z-index:5;left:var(--gouttiere);bottom:clamp(18px,3.5vh,36px);
  display:inline-flex;align-items:center;gap:.7em;background:none;border:0;cursor:pointer;
  color:rgba(244,241,234,.45);font-family:var(--sans);font-size:.62rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;padding:.4em 0;transition:color .4s ease;
}
.son:hover,.son[aria-pressed="true"]{color:var(--clair)}
.son svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.son .onde{opacity:0;transition:opacity .4s ease}
.son[aria-pressed="true"] .onde{opacity:1}

/* ---------- boutons & liens ---------- */
.btn{
  font-family:var(--sans);font-size:.76rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;border-radius:0;box-shadow:none;padding:0 0 .35em;
  background:none;border:0;border-bottom:1px solid var(--filet);
  transition:border-color .45s ease,background .3s ease,color .3s ease;
}
.btn-clair,.btn-fant{color:var(--clair);background:none;border-bottom-color:rgba(244,241,234,.32)}
.btn-clair:hover,.btn-fant:hover{border-bottom-color:var(--clair);background:none}
.btn-contour{color:var(--bleu)}
.btn-contour:hover{border-bottom-color:var(--bleu)}
.btn-plein{
  background:var(--bleu);color:var(--clair);border:0;border-radius:0;
  padding:.95em 1.7em;letter-spacing:.14em;
}
.btn-plein:hover{background:var(--bleu-nuit);color:var(--clair)}
.lien-souligne{
  font-family:var(--sans);font-size:.78rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;text-decoration:none;color:var(--bleu);
  border-bottom:1px solid var(--filet);padding-bottom:.3em;
}
.lien-souligne:hover{border-bottom-color:var(--bleu)}
.fond-bleu .lien-souligne,.heros .lien-souligne{color:var(--clair);border-bottom-color:rgba(244,241,234,.3)}

/* ---------- on supprime les cartes ---------- */
.carte,.trio-item,.formule,.gal-item,.presse-item,.etape,.metier,.info-col,
.champ,.encart-mois,.sur-devis{
  border-radius:0!important;box-shadow:none!important;
}
.trio-item,.carte,.formule,.presse-item,.etape{
  background:none!important;border:0;border-top:1px solid var(--filet);
  padding:20px 0 0;
}
.fond-bleu .trio-item,.fond-bleu .carte{border-top-color:rgba(244,241,234,.22)}
.trio-item .num,.carte-num,.etape-num{color:var(--bleu);margin-bottom:.5em;display:block}
.fond-bleu .trio-item .num,.fond-bleu .carte-num{color:rgba(244,241,234,.55)}
.trio-item p,.carte p{color:var(--sourdine);font-size:.94rem;line-height:1.56}
.fond-bleu .trio-item p,.fond-bleu .carte p{color:rgba(244,241,234,.72)}

/* ---------- photographies : bord à bord, sans cadre ---------- */
.photo,.photo-image{border-radius:0;box-shadow:none;background:none;padding:0;border:0}
.photo-image figcaption,.plan-legende,.photo-note{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sourdine);padding-top:12px;
}
/* la légende quitte l'image : lisible sur l'ivoire, photo non recadrée */
.signature-photo{position:static;background:var(--ivoire);padding-block:0 clamp(52px,8vh,104px)}
.signature-photo img{height:auto;max-height:none;object-fit:fill;aspect-ratio:auto}
.signature-legende{
  position:static;inset:auto;background:none;text-shadow:none;color:var(--encre);
  padding:clamp(30px,4.5vh,52px) 0 0;
}
.signature-legende .env{padding-inline:var(--gouttiere)}
.signature-legende h2{color:var(--encre);font-size:clamp(2.1rem,5.2vw,4rem);margin-bottom:.35em}
.signature-legende p.oeil{color:var(--sourdine)}
.signature-legende .legende-texte{color:var(--sourdine);max-width:36em}
.portrait-centre{max-width:760px;margin:0 auto;padding-inline:var(--gouttiere)}

/* ---------- FAQ ---------- */
.faq details{border:0;border-top:1px solid var(--filet);border-radius:0;background:none;padding:0}
.faq summary{
  font-family:var(--serif);font-size:clamp(1.1rem,1.8vw,1.42rem);font-weight:400;
  padding:20px 0;color:var(--encre);
}
.faq details p{padding:0 0 22px;color:var(--sourdine)}

/* ---------- formulaire ---------- */
.champ input,.champ select,.champ textarea{
  border-radius:0;border:0;border-bottom:1px solid var(--filet);background:none;
  font-family:var(--sans);font-size:1rem;padding:.7em 0;
}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-bottom-color:var(--bleu)}
.champ label,.champ-choix legend{
  font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sourdine);
}
.form-ok,.form-erreur{border-radius:0;box-shadow:none}

/* ---------- horaires & infos ---------- */
.horaires th,.horaires td{
  font-family:var(--sans);font-weight:300;font-size:.94rem;
  border-bottom:1px solid var(--filet);padding:10px 0;
}
.horaires th{color:var(--sourdine);font-weight:400}
.info-gros{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.3}

/* ---------- distinction télévision ---------- */
.distinction{
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
  padding-block:clamp(32px,5vh,52px);text-align:center;
  display:grid;gap:clamp(13px,2vh,19px);justify-items:center;
}
.dist-phrase{
  font-family:var(--serif);font-size:clamp(1.45rem,3.3vw,2.55rem);line-height:1.12;
  letter-spacing:-.012em;color:var(--encre);
}
.dist-phrase em{font-style:italic;display:block;color:var(--bleu);margin-top:.1em}
.dist-chaine{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sourdine)}

/* ---------- bandeau presse ---------- */
.bandeau-presse{background:var(--grege);border:0;padding-block:clamp(54px,8vh,92px)}
.bandeau-presse ul{
  list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:clamp(18px,4vw,52px);align-items:baseline;
}
.bandeau-presse li{
  font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.25rem);color:var(--sourdine);
  background:none;border:0;padding:0;
}

/* ---------- itinéraire numéroté ---------- */
.itineraire{
  list-style:none;counter-reset:pas;margin:clamp(26px,4vh,40px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,4vw,54px);
}
.itineraire li{
  counter-increment:pas;border-top:1px solid var(--filet);padding:18px 0 0;
  font-size:.94rem;line-height:1.6;color:var(--sourdine);
}
.itineraire li::before{
  content:counter(pas,decimal-leading-zero);
  position:static;display:block;width:auto;height:auto;
  background:none;border-radius:0;place-items:initial;
  margin:0 0 .55em;left:auto;top:auto;
  font-family:var(--sans);font-size:.66rem;font-weight:500;letter-spacing:.2em;color:var(--bleu);
}
.itineraire strong{color:var(--encre);font-weight:400}
.plan-cadre{background:var(--grege);padding:clamp(16px,3vw,34px);border:0;border-radius:0}
.plan-svg text{fill:var(--bleu)}

/* ---------- icônes sociales ---------- */
.reseaux{display:flex;gap:14px;margin-top:22px}
.reseaux a{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid rgba(244,241,234,.22);color:rgba(244,241,234,.72);text-decoration:none;
  transition:border-color .35s ease,color .35s ease;
}
.reseaux a:hover{border-color:var(--clair);color:var(--clair)}
.reseaux svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* ---------- pied de page ---------- */
.pied{background:var(--bleu);color:rgba(244,241,234,.72);padding-block:clamp(56px,9vh,96px)}
.pied a{color:rgba(244,241,234,.72);text-decoration:none}
.pied a:hover{color:var(--clair)}
.pied-logo{height:38px;width:auto}
.pied-petit{font-size:.86rem;line-height:1.8;letter-spacing:.03em}
.pied-nav a{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase}
.credit{font-size:.68rem;line-height:1.6;color:rgba(244,241,234,.38);margin-top:16px;max-width:34em}

@media (max-width:900px){
  .nav-principale{display:none}
  .entete-fin{margin-left:auto;gap:.7rem}
  .itineraire{grid-template-columns:1fr;gap:20px}
  .son span{display:none}
  .son{bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .vue{opacity:0}
  .vue:first-child{opacity:.62}
}

/* ---------- bouton « copier » à côté des adresses e-mail ---------- */
.copier{
  display:inline-block;margin-left:.7em;vertical-align:baseline;
  font-family:var(--sans);font-size:.6rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sourdine);
  background:none;border:0;border-bottom:1px solid var(--filet);
  padding:0 0 .25em;cursor:pointer;transition:color .3s ease,border-color .3s ease;
}
.copier:hover{color:var(--bleu);border-bottom-color:var(--bleu)}
.copier--ok{color:var(--bleu);border-bottom-color:var(--bleu)}
.pied .copier{color:rgba(244,241,234,.55);border-bottom-color:rgba(244,241,234,.28)}
.pied .copier:hover,.pied .copier--ok{color:var(--clair);border-bottom-color:var(--clair)}