/* Pages internes - reprise du thème de la page d'accueil.
   Chargée après summit.css. */

/* ---------- En-tête de page : même langage que le hero de l'accueil ---------- */

.entete{
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(15rem,34vh,23rem);
  /* Le haut laisse passer le bouton de retour, qui flotte ; le bas est
     resserré, l'écart jusqu'à la première image étant repris par le corps. */
  padding:clamp(5rem,9.5vh,6.5rem) var(--marge) clamp(1.75rem,4vh,2.75rem);
  text-align:center;
}
.entete__fond{
  position:absolute;inset:-2%;
  background-position:center 58%;background-size:cover;background-repeat:no-repeat;
  background-color:var(--creme-2);
}
/* ---------- Jour et nuit ----------
   Les zones qui ont une photo de nuit la portent en calque au-dessus de la
   photo de jour. Une seule animation, la même partout, lancée au chargement
   de la page : toutes les villes passent à la nuit en même temps, puis
   reviennent au jour ensemble. Cycle de 16 s : 6 s de jour, 2 s de fondu,
   6 s de nuit, 2 s de fondu. */
.entete__nuit,.zone__nuit{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  animation:jour-nuit 16s ease-in-out infinite;
  pointer-events:none;
}
.entete__nuit{background-position:center 58%}
@keyframes jour-nuit{
  0%,37.5%{opacity:0}
  50%,87.5%{opacity:1}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .entete__nuit,.zone__nuit{animation:none}
}

/* ---------- Briefs d'image, provisoires ----------
   Tout emplacement encore illustré par une image d'ambiance générique
   porte un encadré décrivant la photo à produire : son type, le texte à
   donner tel quel à un générateur d'images, et le nom exact du fichier.
   Déposer l'image sous ce nom fait disparaître l'encadré. */
.brief{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  padding:.6rem;
  background:rgba(250,247,243,.93);
  backdrop-filter:blur(2px);
}
.brief__boite{
  width:100%;max-height:100%;overflow:auto;
  border:1px dashed var(--brun);border-radius:8px;
  padding:.7rem .85rem;
  background:var(--blanc);
  text-align:left;
}
.brief__type{
  margin:0 0 .4rem;
  color:var(--brun-fonce);
  font-size:.7rem;letter-spacing:.2em;
}
.brief__texte{
  margin:0 0 .5rem;
  font-size:.78rem;line-height:1.45;color:var(--encre);
  user-select:all;            /* un clic sélectionne tout le texte */
  cursor:text;
}
.brief__nom{
  margin:0;padding-top:.4rem;
  border-top:1px solid var(--hairline);
  font-size:.7rem;color:var(--encre-doux);
}
.brief__nom code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;color:var(--brun-fonce);
  user-select:all;
}
/* Les cadres s'agrandissent pour laisser lire le brief, le temps qu'il reste. */
.fiche__visuel--brief{height:auto;min-height:clamp(11rem,30vh,17rem)}
.rappel--brief{min-height:clamp(12rem,30vh,16rem)}
.entete--brief .brief{inset:auto 0 0 0;height:auto;padding:0 var(--marge) 1rem;background:none;backdrop-filter:none}
.entete--brief .brief__boite{width:min(100%,46rem);margin:0 auto;background:rgba(255,255,255,.95)}
@media (max-width:700px){
  .brief__texte{font-size:.74rem}
  .fiche__visuel--brief{min-height:13rem}
}

.entete__voile{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 95% at 50% 40%, rgba(250,247,243,.62) 0%, rgba(250,247,243,.88) 58%, rgba(250,247,243,.97) 100%),
    linear-gradient(180deg, rgba(250,247,243,.60), rgba(250,247,243,.24) 42%, rgba(250,247,243,.94));
}
.entete__inner{
  position:relative;z-index:2;
  width:min(100%,62rem);
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(.55rem,1.4vh,1rem);
}
.entete__oeil{
  margin:0;
  display:flex;align-items:center;gap:.9rem;
  color:var(--brun-fonce);
  font-size:18px;
}
.entete__oeil::before,.entete__oeil::after{
  content:"";height:1px;width:clamp(1.5rem,4vw,3rem);background:var(--hairline);
}
.entete h1{
  margin:0;
  font-weight:300;
  font-size:clamp(1.9rem,1.35rem + 2.1vw,3.2rem);
  line-height:1.12;
  letter-spacing:-.01em;
  /* Pas de bride en caractères : chaque titre tient sur une ligne tant que
     la colonne le permet, et se répartit proprement en deux quand la place
     manque vraiment, sur téléphone. */
  max-width:none;
  text-wrap:balance;
}
.entete h1 em{font-style:italic;color:var(--brun-fonce)}
.entete__chapo{
  margin:0;
  max-width:58ch;
  color:var(--encre-doux);
  font-size:clamp(1rem,.95rem + .25vw,1.12rem);
  line-height:1.7;
}
.entete .actions-hero{margin-top:clamp(.4rem,1.2vh,.9rem)}

/* ---------- Corps de page ---------- */

.corps{
  padding:clamp(1.75rem,4vh,3rem) var(--marge) clamp(3rem,7vh,5rem);
  background:var(--creme);
}
.corps__inner{width:min(100%,74rem);margin:0 auto}

.section__titre{
  margin:0 0 clamp(1.1rem,2.6vh,1.75rem);
  display:flex;align-items:center;gap:.9rem;
  color:var(--brun-fonce);
  font-size:18px;
}
.section__titre::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,var(--hairline),rgba(162,126,93,0));
}

/* ---------- Fiches en alternance ---------- */

.fiche{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  padding:clamp(1.75rem,4vh,2.75rem) 0;
  border-top:1px solid var(--hairline);
  scroll-margin-top:5rem;
}
.fiche:last-of-type{border-bottom:1px solid var(--hairline)}
.fiche:nth-of-type(even) .fiche__visuel{order:-1}
.fiche h2{
  margin:0 0 .7rem;
  font-weight:300;
  font-size:clamp(1.3rem,1.05rem + 1vw,1.95rem);
  line-height:1.2;
}
.fiche p{margin:0;max-width:48ch;color:var(--encre-doux);line-height:1.7}
.fiche__visuel{
  position:relative;overflow:hidden;
  height:clamp(9rem,26vh,15rem);
  border-radius:12px;
  background-size:cover;background-position:center;
  background-color:var(--creme-2);
  opacity:1;
}

/* ---------- Fiches à vues multiples ----------
   Quand plusieurs photos ont été déposées pour un même emplacement, la
   fiche les fait défiler en fondu enchaîné. La première reste le fond du
   cadre, les suivantes sont des calques qui s'allument chacun à leur
   tour : 4 s de pose, 1 s de fondu. Le nom de l'animation, sa durée et
   son attente arrivent du gabarit, en variables, pour qu'une seule règle
   puisse les couper si le visiteur demande moins d'animations. */
.fiche__vue{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;pointer-events:none;
  animation:var(--defile) var(--duree) var(--attente) infinite;
}
@keyframes defile-2{0%{opacity:0}10%,50%{opacity:1}60%,100%{opacity:0}}
@keyframes defile-3{0%{opacity:0}6.667%,33.333%{opacity:1}40%,100%{opacity:0}}
@keyframes defile-4{0%{opacity:0}5%,25%{opacity:1}30%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .fiche__vue{animation:none}
}

/* ---------- Bande d'appel en bas de page ---------- */

.rappel{
  position:relative;overflow:hidden;
  width:min(100%,74rem);
  margin:clamp(2.5rem,6vh,4rem) auto 0;
  border-radius:12px;
  display:flex;align-items:center;
  min-height:clamp(9rem,22vh,13rem);
  background-color:var(--creme-2);
}
.rappel__fond{
  position:absolute;inset:0;
  background-size:cover;background-position:center 57%;
  /* Même correction que sur la bande de l'accueil : l'enveloppe est
     crème sur un marbre crème, un léger contraste la fait exister. Le
     voile de gauche, lui, ne bouge pas : le texte des pages intérieures
     va jusqu'à 41 % de la largeur, il a besoin de toute sa place. */
  filter:contrast(1.12) saturate(1.15) brightness(.98);
}
.rappel__voile{
  position:absolute;inset:0;
  background:linear-gradient(to right,
    rgba(250,247,243,.97) 0%, rgba(250,247,243,.95) 20%,
    rgba(250,247,243,.78) 30%, rgba(250,247,243,.40) 37%, rgba(250,247,243,0) 44%);
}
.rappel__texte{
  position:relative;z-index:2;
  padding:clamp(1.2rem,3vh,2rem) clamp(1.25rem,2.6vw,2.5rem);
  max-width:min(46%,32rem);
}
.rappel h2{
  margin:0 0 .55rem;
  font-weight:300;
  font-size:clamp(1.2rem,1rem + .9vw,1.75rem);
  line-height:1.25;
}
.rappel p{margin:0 0 1rem;color:var(--encre-doux);font-size:.98rem;line-height:1.6;max-width:34ch}

/* ---------- Zones d'intervention, maillage entre pages villes ---------- */

.zones{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:clamp(.6rem,1.4vw,1rem);
}
/* Deux colonnes sur tous les téléphones. Laissée à elle-même, la grille
   réclame 11 rem par pastille, soit 361 px pour deux colonnes : les iPhone
   larges passaient, les autres retombaient sur une seule colonne et la page
   s'allongeait. On impose donc le nombre de colonnes plutôt qu'une largeur
   minimale, et « minmax(0,1fr) » empêche un nom long de déborder. */
@media (max-width:600px){
  .zones{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.zone{
  position:relative;overflow:hidden;
  display:flex;align-items:flex-end;
  height:clamp(7rem,16vh,10rem);
  border-radius:10px;
  background-color:var(--creme-2);
  background-size:cover;background-position:center;
  transition:transform .5s var(--ease);
}
.zone::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(40,28,20,.92) 0%, rgba(40,28,20,.86) 28%, rgba(40,28,20,.30) 58%, rgba(40,28,20,0) 100%);
}
.zone span{
  position:relative;z-index:2;
  padding:.9rem 1rem;
  color:var(--blanc);
  font-size:16px;
  text-shadow:0 1px 12px rgba(28,19,13,.5);
}
.zone:hover{transform:translateY(-3px)}
.zone--texte{
  background:var(--blanc);
  border:1px solid var(--hairline);
  align-items:center;justify-content:center;
}
.zone--texte::after{display:none}
.zone--texte span{color:var(--brun-fonce);text-shadow:none;text-align:center}

/* ---------- Le numéro reprend la pastille de l'accueil ---------- */

.interne__tel .tel,.entete .tel{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem 1.3rem;
  letter-spacing:.13em;
  border:1px solid var(--brun-fonce);border-radius:999px;
  background:var(--brun-fonce);color:var(--blanc);
  font-weight:600;text-shadow:none;
  box-shadow:0 1px 14px rgba(80,58,40,.16);
  transition:background .45s var(--ease),border-color .45s var(--ease);
}
.interne__tel .tel svg,.entete .tel svg{
  width:14px;height:14px;flex:0 0 auto;
  stroke:currentColor;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.interne__tel .tel:hover,.entete .tel:hover{background:var(--brun-profond);border-color:var(--brun-profond)}

/* ---------- Page introuvable ---------- */
.perdu .btn{font-weight:600;color:var(--encre);border-color:var(--brun-profond)}
.perdu .btn:hover{background:var(--brun-fonce);border-color:var(--brun-fonce);color:var(--blanc)}

/* ---------- Mentions légales ---------- */
/* Note de bas de page : la mention du partenaire titulaire de la carte
   professionnelle. Discrète, mais lisible, comme l'exige une mention. */
.note-legale{
  margin:clamp(2rem,5vh,3.25rem) 0 0;
  padding-top:clamp(1rem,2.5vh,1.5rem);
  border-top:1px solid var(--hairline);
  max-width:70ch;
  font-size:.86rem;
  line-height:1.65;
  color:var(--encre-doux);
}

/* L'énumération qui ouvre une fiche : ce que couvre la prestation, avant
   la manière dont elle est menée. */
.fiche__liste{
  margin:0 0 .7rem;
  color:var(--brun-fonce);
}

.legal{padding:clamp(1.5rem,3.5vh,2.4rem) 0;border-top:1px solid var(--hairline)}
.legal:last-of-type{border-bottom:1px solid var(--hairline)}
.legal h2{margin:0 0 clamp(.8rem,2vh,1.2rem);font-weight:300;font-size:clamp(1.2rem,1rem + .8vw,1.6rem)}
.legal p{margin:0 0 .9rem;max-width:70ch;color:var(--encre-doux);line-height:1.7}
.legal p:last-child{margin-bottom:0}
.legal__liste{display:grid;gap:.55rem}
.legal__ligne{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:.5rem 1.5rem;align-items:baseline}
.legal__ligne > span:first-child{color:var(--brun-fonce)}
.legal a{border-bottom:1px solid var(--hairline)}
.legal a:hover{color:var(--brun-profond);border-color:var(--brun-fonce)}
mark{background:var(--beige-clair);color:var(--brun-profond);padding:.05em .4em;border-radius:3px}

/* ---------- Responsive ---------- */

@media (max-width:820px){
  .fiche{grid-template-columns:1fr;gap:1.1rem}
  .fiche:nth-of-type(even) .fiche__visuel{order:0}
  .fiche__visuel{height:clamp(8rem,34vw,12rem)}
  .rappel{display:block}
  .rappel__texte{max-width:none}
  .rappel__voile{
    background:linear-gradient(to bottom, rgba(250,247,243,.30) 0%, rgba(250,247,243,.72) 34%, rgba(250,247,243,.96) 70%);
  }
  .entete{min-height:clamp(16rem,40vh,22rem)}
}
@media (max-width:600px){
  .entete__oeil,.section__titre{font-size:14px}
  .zone span{font-size:14px}
  .legal__ligne{grid-template-columns:1fr;gap:.15rem}
}
@media (max-width:340px){
  .entete__oeil,.section__titre{font-size:12px}
}

/* Liens dans les fiches du sommaire des prestations */
.fiche h2 a{border-bottom:1px solid transparent;transition:color .4s var(--ease),border-color .4s var(--ease)}
.fiche h2 a:hover{color:var(--brun-profond);border-color:var(--brun-fonce)}
.lien-fiche{
  display:inline-flex;align-items:center;gap:.6rem;
  color:var(--brun-fonce);font-weight:600;
  border-bottom:1px solid var(--hairline);padding-bottom:3px;
  transition:color .4s var(--ease),border-color .4s var(--ease);
}
.lien-fiche span{transition:transform .5s var(--ease)}
.lien-fiche:hover{color:var(--brun-profond);border-color:var(--brun-fonce)}
.lien-fiche:hover span{transform:translateX(4px)}
a.fiche__visuel{display:block;transition:transform .5s var(--ease)}
a.fiche__visuel:hover{transform:translateY(-3px)}