/* =========================================================================
   photographe-mariage-normandie.fr
   Direction : la discrétion comme signature.
   Palette tirée des photographies elles-mêmes (costume carmin, alliances laiton,
   lumière du nord). Polices auto-hébergées : aucun appel à un CDN tiers.
   ========================================================================= */

/* ---------- Polices (Instrument Serif + Archivo, licence OFL) ------------- */
/* latin-ext */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/instrumentserif-1.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* latin */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url('../fonts/instrumentserif-2.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* latin-ext */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/instrumentserif-3.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* latin */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/instrumentserif-4.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* latin-ext */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
  src:url('../fonts/archivo-2.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
/* latin */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;
  src:url('../fonts/archivo-3.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Jetons ------------------------------------------------------- */
:root{
  /* couleurs relevées sur les photographies de Youssef */
  --craie:#F1F2F3;        /* lumière du nord — le fond */
  --craie-2:#E6E8E9;      /* surfaces posées */
  --ardoise:#1B2025;      /* l'encre */
  --nuit:#11161A;         /* la salle de projection */
  --carmin:#93202A;       /* le costume rouge — l'accent */
  --carmin-vif:#C4515A;   /* le carmin, sur fond sombre */
  --laiton:#A8874E;       /* les alliances */
  --pierre:#5F656B;       /* texte secondaire */
  --filet:rgba(27,32,37,.14);
  --filet-nuit:rgba(241,242,243,.16);

  --f-display:'Instrument Serif','Iowan Old Style',Georgia,'Times New Roman',serif;
  --f-body:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --gut:clamp(1.25rem,4vw,3rem);
  --maxw:76rem;
  --measure:34rem;
  --pad-section:clamp(4.5rem,10vw,9rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Socle -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  background:var(--craie);
  color:var(--ardoise);
  font-family:var(--f-body);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.7;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Le grain — la matière d'un tirage, pas une décoration.
   Fixe, non cliquable, très faible. Il unifie photo et typographie. */
body::after{
  content:'';position:fixed;inset:0;z-index:9000;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
::selection{background:var(--carmin);color:var(--craie);}
:focus-visible{outline:2px solid var(--carmin);outline-offset:3px;border-radius:2px;}
.nuit :focus-visible{outline-color:var(--carmin-vif);}

.saut{position:absolute;left:-9999px;top:0;background:var(--ardoise);color:var(--craie);
  padding:.75rem 1.25rem;z-index:10000;text-decoration:none;}
.saut:focus{left:.5rem;top:.5rem;}

/* ---------- Trame ------------------------------------------------------- */
.enveloppe{max-width:var(--maxw);margin-inline:auto;
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));}
.section{padding-block:var(--pad-section);}
.nuit{background:var(--nuit);color:var(--craie);}
.nuit a{color:var(--craie);}

/* ---------- Typographie ------------------------------------------------- */
.display{
  font-family:var(--f-display);font-weight:400;
  line-height:.99;letter-spacing:-.018em;text-wrap:balance;
}
h1,h2,h3{margin:0;}
.t-hero{font-size:clamp(2.7rem,6.6vw,5.4rem);}
.t-section{font-size:clamp(2.1rem,4.4vw,3.6rem);}
.t-carte{font-family:var(--f-display);font-size:clamp(1.6rem,2.2vw,2rem);line-height:1.05;letter-spacing:-.01em;}
.t-hero em,.t-section em{font-style:italic;}

.sourcil{
  display:flex;align-items:center;gap:.7rem;
  font-family:var(--f-body);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;color:var(--carmin);
  margin:0 0 1.5rem;
}
.sourcil::before{content:'';width:2rem;height:1px;background:currentColor;flex:none;}
.nuit .sourcil{color:var(--laiton);}

.chapo{font-size:clamp(1.05rem,1rem + .35vw,1.2rem);color:var(--pierre);max-width:var(--measure);}
.nuit .chapo{color:rgba(241,242,243,.72);}
p{margin:0 0 1.15em;max-width:var(--measure);}
p:last-child{margin-bottom:0;}
/* Un titre de section ne doit jamais coller au texte qui le suit. */
.t-section + p,.t-section + .chapo{margin-top:1.5rem;}

/* ---------- Actions ------------------------------------------------------ */
.actions{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;align-items:center;margin-top:2.5rem;}
.bouton{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--carmin);color:var(--craie);
  font-family:var(--f-body);font-size:.82rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;text-decoration:none;
  padding:1.05rem 1.9rem;border:1px solid var(--carmin);border-radius:1px;
  transition:background .35s var(--ease),color .35s var(--ease);
}
.bouton:hover{background:var(--ardoise);border-color:var(--ardoise);}
.nuit .bouton:hover{background:var(--craie);color:var(--ardoise);border-color:var(--craie);}

.lien-fleche{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  text-decoration:none;color:var(--ardoise);
  border-bottom:1px solid var(--filet);padding-bottom:.3rem;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.lien-fleche::after{content:'→';transition:transform .3s var(--ease);}
.lien-fleche:hover{color:var(--carmin);border-color:var(--carmin);}
.lien-fleche:hover::after{transform:translateX(4px);}
.nuit .lien-fleche{color:var(--craie);border-color:var(--filet-nuit);}
.nuit .lien-fleche:hover{color:var(--laiton);border-color:var(--laiton);}

/* ---------- Navigation --------------------------------------------------- */
.barre{
  position:sticky;top:0;z-index:8000;
  /* Fond opaque d'abord : si color-mix() n'est pas interprété, la déclaration
     suivante est ignorée et la barre reste lisible. Sans ce repli, elle
     deviendrait transparente et le contenu défilerait derrière. */
  background:var(--craie);
  background:color-mix(in srgb,var(--craie) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease);
  /* Encoche / Dynamic Island : en paysage sur iPhone, elles mordent sur le
     bord de l'écran. On décale d'autant, jamais moins que la gouttière. */
  padding-top:env(safe-area-inset-top);
}
.barre.pose{border-bottom-color:var(--filet);}
.barre-i{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  max-width:var(--maxw);margin-inline:auto;
  padding-block:.9rem;
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));}
.marque{font-family:var(--f-display);font-size:1.5rem;line-height:1;text-decoration:none;letter-spacing:-.01em;}
.marque span{color:var(--carmin);}
.nav{display:flex;align-items:center;gap:1.9rem;}
.nav a{
  font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--pierre);transition:color .3s var(--ease);
}
.nav a:hover,.nav a[aria-current='page']{color:var(--ardoise);}
.nav a[aria-current='page']{font-weight:700;}
/* Le portfolio quitte le site : la flèche le dit d'un coup d'œil. */
.nav-portfolio{display:inline-flex;align-items:center;gap:.2rem;}
/* Le numéro, en carmin dans la barre : c'est l'action qu'on veut, pas « Contact ». */
.nav .devis{
  display:inline-flex;align-items:center;gap:.5rem;
  color:var(--craie);background:var(--carmin);padding:.6rem 1.15rem;
  font-weight:600;border-radius:1px;letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
}
.nav .devis:hover{background:var(--ardoise);color:var(--craie);}
.nav .devis svg{flex:none;}

.burger{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--ardoise);}
.burger svg{display:block;}

@media (max-width:900px){
  .burger{display:block;}
  .nav{
    position:fixed;inset:3.6rem 0 auto;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--craie);border-bottom:1px solid var(--filet);
    padding-block:1rem 2rem;
    padding-left:max(var(--gut), env(safe-area-inset-left));
    padding-right:max(var(--gut), env(safe-area-inset-right));
    transform:translateY(-120%);transition:transform .4s var(--ease);
    max-height:calc(100dvh - 3.6rem);overflow-y:auto;
  }
  .nav[data-ouvert='true']{transform:translateY(0);}
  .nav a{width:100%;padding:1rem 0;font-size:.95rem;border-bottom:1px solid var(--filet);letter-spacing:.04em;}
  .nav .devis{margin-top:1.25rem;justify-content:center;display:flex;border-bottom:0;}
}

/* ---------- Hero --------------------------------------------------------- */
.hero{position:relative;padding-block:clamp(3rem,7vw,6rem) 0;}
.hero-i{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4rem);align-items:center;
}
/* Au-delà de 1000px l'image file jusqu'au bord droit de l'écran.
   Plutôt qu'une marge négative — qui se calcule sur la colonne de grille et
   déborde — on élargit le conteneur et on aligne le texte par le padding.
   Le % se réfère au parent pleine largeur : l'alignement reste juste, avec ou
   sans barre de défilement. */
@media (min-width:1000px){
  .hero-i{
    max-width:none;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    padding-left:max(var(--gut), calc(50% - var(--maxw)/2 + var(--gut)));
    padding-right:0;
  }
}
.hero h1{margin:0;}
.hero .t-hero{margin:0;}
.hero .chapo{margin-top:1.75rem;}

/* Sur mobile l'image sort des DEUX côtés : elle occupe toute la largeur de
   l'écran. Ne déborder qu'à droite la faisait paraître décalée, jamais centrée. */
.hero-img{position:relative;margin-inline:calc(var(--gut)*-1);}
@media (min-width:1000px){.hero-img{margin-inline:0;}}
.hero-img img{width:100%;aspect-ratio:3/2;object-fit:cover;}
/* Un cadrage un peu plus haut en écran étroit : sur un format 3/2 réduit à
   370px de large, le sujet devient minuscule. */
@media (max-width:640px){.hero-img img{aspect-ratio:4/3;object-position:center;}}
.hero-credit{
  margin:.9rem 0 0;padding-left:var(--gut);
  font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--pierre);
}
@media (min-width:1000px){.hero-credit{padding-left:0;}}

/* ---------- Le manifeste (la signature du site) -------------------------- */
.manifeste{border-top:1px solid var(--filet);}
.manifeste-i{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);}
@media (min-width:900px){
  .manifeste-i{grid-template-columns:minmax(0,5fr) minmax(0,6fr);}
}
.manifeste .t-section{max-width:16ch;}
.manifeste-txt>p+p{margin-top:1.15em;}
.manifeste-liens{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:2rem;}

/* ---------- Derrière l'appareil -------------------------------------------
   Le seul endroit du site où l'on voit la personne. Un mariage se confie à
   quelqu'un, pas à une marque : l'image porte autant que le texte. */
.qui{border-top:1px solid var(--filet);}
.qui-i{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center;}
@media (min-width:820px){
  .qui-i{grid-template-columns:minmax(0,4fr) minmax(0,7fr);}
}
.qui-img{margin:0;}
.qui-img img{width:100%;object-fit:cover;border-radius:1px;}
@media (max-width:819px){
  .qui-img{max-width:19rem;}
}

/* ---------- Les trois métiers -------------------------------------------- */
.metiers{background:var(--craie-2);}
.grille-metiers{display:grid;grid-template-columns:1fr;gap:0;margin-top:3.5rem;}
@media (min-width:820px){.grille-metiers{grid-template-columns:repeat(3,1fr);gap:var(--gut);}}
.metier{
  border-top:1px solid var(--ardoise);padding-top:1.5rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;
  position:relative;
}
/* Le filet se recolore en carmin de gauche à droite au survol : c'est la seule
   chose qui bouge, et elle indique où l'on va. */
.metier::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--carmin);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.metier:hover::before,.metier:focus-within::before{transform:scaleX(1);}
@media (max-width:819px){.metier{padding-bottom:2.5rem;}.metier:first-child{margin-top:0;}}
.metier p{color:var(--pierre);font-size:.97rem;flex:1;}
.metier .lien-fleche{margin-top:.5rem;}

/* ---------- La planche --------------------------------------------------- */
.planche-i{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut);margin-top:4rem;}
/* L'image déborde légèrement de son cadre au survol : le cadrage se resserre,
   comme quand on regarde une photo de plus près. Discret, et seulement à la
   souris — pas de survol au doigt. */
.planche figure{margin:0;overflow:hidden;}
.planche img{width:100%;object-fit:cover;}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .planche figure picture{display:block;overflow:hidden;}
  .planche img{transition:transform 1.1s var(--ease);}
  .planche figure:hover img{transform:scale(1.035);}
}
.f-alliances{grid-column:1/13;}
.f-henne{grid-column:1/13;}
.f-roses{grid-column:1/13;}
.f-tulipes{grid-column:1/13;}
@media (min-width:820px){
  .f-alliances{grid-column:1/8;}
  .f-henne{grid-column:8/13;align-self:end;}
  .f-roses{grid-column:1/13;}
  .f-tulipes{grid-column:4/10;}
}
.planche figcaption{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .9rem;
  margin-top:.9rem;padding-top:.75rem;border-top:1px solid var(--filet-nuit);
}
.geste{font-family:var(--f-display);font-size:1.15rem;letter-spacing:-.01em;}
/* Pas de capitales ici : « 37 mm · f/5,6 · 1/250 s » est une notation
   normalisée. La passer en capitales donnerait « 37 MM · F/5,6 · 1/250 S ». */
.donnees{
  font-size:.68rem;letter-spacing:.06em;
  color:rgba(241,242,243,.5);font-variant-numeric:tabular-nums;
}

/* ---------- Engagements -------------------------------------------------- */
.engagements{display:grid;grid-template-columns:1fr;gap:0;margin-top:3.5rem;
  border-top:1px solid var(--filet);}
@media (min-width:760px){.engagements{grid-template-columns:1fr 1fr;column-gap:var(--gut);}}
.engagement{padding:1.5rem 0;border-bottom:1px solid var(--filet);}
.engagement h3{font-family:var(--f-body);font-size:.95rem;font-weight:700;
  letter-spacing:.01em;margin:0 0 .3rem;}
.engagement p{margin:0;color:var(--pierre);font-size:.92rem;line-height:1.6;max-width:44ch;}

/* ---------- Zone d'intervention ------------------------------------------ */
.villes{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1.5rem;
  margin-top:2.5rem;font-family:var(--f-display);
  font-size:clamp(1.7rem,3.6vw,3rem);line-height:1.25;letter-spacing:-.015em;
}
.villes li{list-style:none;display:flex;align-items:baseline;gap:1.5rem;}
.villes li::after{content:'·';color:var(--carmin);font-size:.7em;}
.villes li:last-child::after{content:'';}
/* Une ville cliquable a sa page ; le soulignement dit lesquelles. */
.villes a{
  text-decoration:none;border-bottom:1px solid var(--filet);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.villes a:hover{color:var(--carmin);border-color:var(--carmin);}
.villes-note{margin-top:2.25rem;color:var(--pierre);font-style:italic;
  font-family:var(--f-display);font-size:1.35rem;}

/* ---------- Tarifs ------------------------------------------------------- */
.formules{display:grid;grid-template-columns:1fr;gap:var(--gut);margin-top:3.5rem;}
@media (min-width:880px){.formules{grid-template-columns:repeat(3,1fr);}}
.formule{
  display:flex;flex-direction:column;
  background:var(--craie);border:1px solid var(--filet);border-radius:1px;
  padding:clamp(1.5rem,2.5vw,2.25rem);
}
.formule[data-phare='true']{border-color:var(--carmin);border-width:1px;box-shadow:0 0 0 1px var(--carmin);}
/* line-height = min-height : le bandeau vide des formules sans mention occupe
   exactement la même hauteur, et les titres s'alignent d'une carte à l'autre. */
.formule-tag{
  font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--carmin);margin:0 0 .9rem;line-height:1.25rem;min-height:1.25rem;
}
.formule h3{font-family:var(--f-display);font-size:1.75rem;line-height:1.05;margin:0 0 .2rem;letter-spacing:-.01em;}
.formule .prix{
  font-family:var(--f-display);font-size:clamp(2.6rem,4vw,3.4rem);line-height:1;
  letter-spacing:-.02em;margin:1.25rem 0 .35rem;
}
.formule .prix-note{font-size:.72rem;letter-spacing:.06em;color:var(--pierre);text-transform:uppercase;margin:0;}
.formule .pitch{font-size:.92rem;color:var(--pierre);margin:.6rem 0 0;font-style:italic;}
.formule ul{list-style:none;margin:1.75rem 0 2rem;padding:0;flex:1;
  border-top:1px solid var(--filet);}
.formule li{
  padding:.6rem 0 .6rem 1.15rem;border-bottom:1px solid var(--filet);
  font-size:.9rem;line-height:1.5;position:relative;
}
.formule li::before{content:'';position:absolute;left:0;top:1.1rem;
  width:5px;height:1px;background:var(--laiton);}
/* Dans une colonne de formule il n'y a pas la place du bouton pleine largeur :
   on resserre pour que le libellé tienne sur une ligne. */
.formule .bouton{justify-content:center;padding-inline:1.1rem;letter-spacing:.07em;}

.options{margin-top:var(--pad-section);}
.grille-options{display:grid;grid-template-columns:1fr;gap:0 var(--gut);margin-top:2.5rem;
  border-top:1px solid var(--filet);}
@media (min-width:700px){.grille-options{grid-template-columns:1fr 1fr;}}
.option{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--filet);}
.option span:first-child{font-size:.95rem;}
.option span:last-child{font-family:var(--f-display);font-size:1.3rem;white-space:nowrap;color:var(--carmin);}

/* ---------- Prestations (pages internes) --------------------------------- */
.entete{padding-block:clamp(3rem,6vw,5rem) clamp(2.5rem,4vw,3.5rem);border-bottom:1px solid var(--filet);}
.entete .chapo{margin-top:1.5rem;}
.duo{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,4rem);align-items:start;}
@media (min-width:900px){.duo{grid-template-columns:minmax(0,5fr) minmax(0,6fr);}}
.duo--inverse .duo-img{order:-1;}
@media (min-width:900px){.duo--inverse .duo-img{order:0;}}
.duo-img img{width:100%;object-fit:cover;}
/* Même règle que .donnees : pas de capitales sur une notation normalisée. */
.duo-img figcaption{margin-top:.8rem;font-size:.72rem;letter-spacing:.04em;
  color:var(--pierre);}
.nuit .duo-img figcaption{color:rgba(241,242,243,.5);}

.liste-prest{list-style:none;margin:2rem 0 0;padding:0;
  columns:2;column-gap:var(--gut);}
@media (max-width:640px){.liste-prest{columns:1;}}
.liste-prest li{
  break-inside:avoid;padding:.55rem 0 .55rem 1.25rem;position:relative;
  font-size:.94rem;border-bottom:1px solid var(--filet);
}
.liste-prest li::before{content:'';position:absolute;left:0;top:1.05rem;
  width:6px;height:1px;background:var(--carmin);}

/* ---------- Contact ------------------------------------------------------ */
.contact-i{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start;}
@media (min-width:900px){.contact-i{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);}}
.coords{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--filet);}
.coords li{padding:1.1rem 0;border-bottom:1px solid var(--filet);}
.coords dt{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--pierre);margin-bottom:.3rem;}
.coords dd{margin:0;font-family:var(--f-display);font-size:1.5rem;line-height:1.2;}
.coords dd a{text-decoration:none;border-bottom:1px solid var(--filet);transition:border-color .3s var(--ease),color .3s var(--ease);}
.coords dd a:hover{color:var(--carmin);border-color:var(--carmin);}

.form{background:var(--craie-2);padding:clamp(1.5rem,3vw,2.5rem);border-radius:1px;}
.champ{margin-bottom:1.25rem;}
.champ label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--pierre);margin-bottom:.5rem;}
.champ .requis{color:var(--carmin);}
.champ input,.champ select,.champ textarea{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--ardoise);
  background:var(--craie);border:1px solid var(--filet);border-radius:1px;
  padding:.85rem 1rem;transition:border-color .25s var(--ease);
}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-color:var(--carmin);outline:none;}
.champ textarea{resize:vertical;min-height:8rem;line-height:1.6;}
.duo-champ{display:grid;grid-template-columns:1fr;gap:0 1.25rem;}
@media (min-width:560px){.duo-champ{grid-template-columns:1fr 1fr;}}
.pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.form .bouton{width:100%;justify-content:center;margin-top:.5rem;}
.mention-rgpd{font-size:.78rem;line-height:1.55;color:var(--pierre);margin:1.25rem 0 0;max-width:none;}
.mention-rgpd a{color:var(--carmin);}
.form-retour{margin:1.25rem 0 0;padding:.9rem 1.1rem;border-radius:1px;font-size:.88rem;max-width:none;}
.form-retour[data-etat='ok']{background:rgba(38,90,60,.1);border:1px solid rgba(38,90,60,.35);color:#245439;}
.form-retour[data-etat='erreur']{background:rgba(147,32,42,.08);border:1px solid rgba(147,32,42,.35);color:var(--carmin);}
.form-retour[hidden]{display:none;}

/* ---------- Appel final --------------------------------------------------
   Le numéro est le point d'orgue : on ne met rien à côté qui puisse en
   détourner. C'est un appel qu'on veut, pas un clic. */
.appel{background:var(--carmin);color:var(--craie);text-align:center;}
.appel .t-section{margin-inline:auto;max-width:18ch;}
.appel .chapo{color:rgba(241,242,243,.8);margin:1.5rem auto 0;text-align:center;}
.appel .sourcil{color:rgba(241,242,243,.75);justify-content:center;}
.appel-contact{margin-top:2.75rem;}
.appel-num{
  display:inline-block;font-family:var(--f-display);
  font-size:clamp(2.6rem,6.5vw,4.75rem);line-height:1;letter-spacing:-.02em;
  color:var(--craie);text-decoration:none;font-variant-numeric:tabular-nums;
  border-bottom:1px solid rgba(241,242,243,.3);padding-bottom:.15em;
  transition:border-color .35s var(--ease),opacity .35s var(--ease);
  margin:0;
}
a.appel-num:hover{border-bottom-color:var(--craie);opacity:.85;}
.appel-ou{
  margin:1.5rem auto 0;font-size:.92rem;color:rgba(241,242,243,.75);
  max-width:none;
}
.appel-ou a{color:var(--craie);text-decoration:underline;text-underline-offset:3px;}

/* Le numéro en bouton : sur mobile, un doigt = un appel. */
.bouton-tel{font-variant-numeric:tabular-nums;letter-spacing:.05em;}
.bouton-tel svg{flex:none;}

/* ---------- Écrire sans formulaire ---------------------------------------
   Trois portes vers l'application du visiteur, message déjà rédigé. Aucun
   champ, aucun envoi depuis le site, donc aucune donnée collectée. */
.ecrire-liens{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem;}
.ecrire{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--ardoise);
  border:1px solid var(--filet);border-radius:1px;padding:.8rem 1.15rem;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.ecrire svg{flex:none;}
.ecrire:hover{border-color:var(--ardoise);}
.ecrire.wa:hover{border-color:#25D366;color:#128C4B;}
.nuit .ecrire,.appel .ecrire{color:var(--craie);border-color:rgba(241,242,243,.35);}
.nuit .ecrire:hover,.appel .ecrire:hover{background:var(--craie);color:var(--ardoise);border-color:var(--craie);}
.appel .ecrire-liens{justify-content:center;margin-top:1.25rem;}

.ecrire-bloc{background:var(--craie-2);padding:clamp(1.5rem,3vw,2.5rem);border-radius:1px;}
.ecrire-note{
  font-size:.8rem;line-height:1.6;color:var(--pierre);
  margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--filet);
  max-width:none;
}
.tel-note{font-size:.85rem;color:var(--pierre);margin:1rem 0 0;}

/* Dans une carte de formule : le numéro, puis les trois raccourcis en dessous.
   Pas de flex:1 — à trois dans une colonne étroite, « E-mail » se couperait en
   deux. Ils prennent leur largeur et passent à la ligne si nécessaire. */
.formule-contact{display:flex;flex-direction:column;gap:.75rem;}
.formule-contact .ecrire-liens{margin-top:0;gap:.4rem;}
.formule-contact .ecrire{
  justify-content:center;padding:.6rem .7rem;font-size:.66rem;
  letter-spacing:.03em;gap:.3rem;white-space:nowrap;
}
.formule-contact .ecrire svg{width:13px;height:13px;}

/* Page contact : le téléphone d'abord, le formulaire ensuite. */
.tel-geant{
  font-family:var(--f-display);font-size:clamp(2.2rem,5vw,3.4rem);
  line-height:1.1;letter-spacing:-.02em;margin:1.75rem 0 0;
  font-variant-numeric:tabular-nums;max-width:none;
}
.tel-geant a{
  text-decoration:none;border-bottom:1px solid var(--filet);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.tel-geant a:hover{color:var(--carmin);border-color:var(--carmin);}
.t-contact{margin-bottom:1.75rem;}

/* ---------- Barre d'appel mobile -----------------------------------------
   Sur téléphone, le geste attendu est d'appeler. Elle reste sous le pouce,
   à toute hauteur de page. Invisible sur ordinateur : le numéro y est déjà
   dans la barre du haut, et on n'appelle pas depuis un ordinateur. */
.barre-mobile{display:none;}
@media (max-width:900px){
  /* Barre FLOTTANTE, pas collée au bas. Sur iPhone, la barre d'adresse de
     Safari occupe le bas de l'écran : un élément à bottom:0 vient buter
     dessus. On la décolle, et on ajoute la zone système (barre d'accueil). */
  .barre-mobile{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;
    position:fixed;z-index:8500;
    left:.85rem;right:.85rem;
    bottom:calc(.85rem + env(safe-area-inset-bottom));
    background:var(--filet);
    border-radius:3px;overflow:hidden;
    box-shadow:0 6px 26px rgba(17,22,26,.22);
  }
  .bm{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    padding:1rem .5rem;text-decoration:none;
    font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
    min-height:3.1rem;  /* cible tactile confortable */
  }
  .bm-tel{background:var(--carmin);color:var(--craie);}
  .bm-wa{background:var(--craie);color:var(--ardoise);}
  .bm svg{flex:none;}
  /* le pied de page ne doit pas finir sous la barre */
  .pied{padding-bottom:calc(6rem + env(safe-area-inset-bottom));}

  /* Escamotée au chargement : elle ne doit pas manger la photo d'accroche,
     ni doubler le bouton d'appel du hero. Le JS la sort une fois la page
     réellement parcourue. Sans JS, elle reste visible. */
  .js .barre-mobile{transform:translateY(calc(100% + 1.5rem));}
  .js .barre-mobile.vue{transform:translateY(0);}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .js .barre-mobile{transition:transform .45s var(--ease);}
}

/* ---------- Pied --------------------------------------------------------- */
.pied{background:var(--nuit);color:var(--craie);padding-block:clamp(3.5rem,6vw,5rem) 2rem;}
.pied-i{display:grid;grid-template-columns:1fr;gap:2.5rem;}
@media (min-width:640px){.pied-i{grid-template-columns:1fr 1fr;gap:2.5rem var(--gut);}}
@media (min-width:1000px){
  .pied-i{grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--gut);}
  .pied-marque{grid-column:auto;}
}
@media (min-width:640px) and (max-width:999px){.pied-marque{grid-column:1/-1;}}
.pied .marque{font-size:1.6rem;color:var(--craie);}
.pied-baseline{color:rgba(241,242,243,.6);font-size:.88rem;margin:1rem 0 0;max-width:34ch;}
.pied-contact{display:flex;flex-direction:column;gap:.3rem;margin-top:1.5rem;}
.pied-fort{
  font-family:var(--f-display);font-size:1.6rem;line-height:1.2;
  color:var(--craie);text-decoration:none;font-variant-numeric:tabular-nums;
  transition:color .3s var(--ease);width:fit-content;
}
a.pied-fort:hover{color:var(--laiton);}
.pied-mail{
  font-size:.88rem;color:rgba(241,242,243,.72);text-decoration:none;
  border-bottom:1px solid var(--filet-nuit);width:fit-content;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
a.pied-mail:hover{color:var(--craie);border-color:var(--laiton);}
.pied-insta{
  display:inline-flex;align-items:center;gap:.55rem;margin-top:1.75rem;
  font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--craie) !important;text-decoration:none;
  border:1px solid var(--filet-nuit);border-radius:1px;padding:.7rem 1.1rem;
  transition:border-color .3s var(--ease),color .3s var(--ease);
}
.pied-insta:hover{border-color:var(--laiton);color:var(--laiton) !important;}
.pied-insta svg{flex:none;}
.pied h2{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--laiton);margin:0 0 1.1rem;}
.pied ul{list-style:none;margin:0;padding:0;}
.pied li{margin-bottom:.6rem;}
.pied li a{font-size:.9rem;color:rgba(241,242,243,.72);text-decoration:none;transition:color .3s var(--ease);}
.pied li a:hover{color:var(--craie);}
.ext{font-size:.72em;opacity:.55;margin-left:.25em;}
.pied-bas{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  margin-top:3.5rem;padding-top:1.5rem;border-top:1px solid var(--filet-nuit);
  font-size:.74rem;color:rgba(241,242,243,.45);
}
.pied-bas p{margin:0;max-width:none;}

/* ---------- Pages locales ------------------------------------------------ */
.lieux{
  display:grid;grid-template-columns:1fr;gap:0 var(--gut);
  margin-top:3rem;border-top:1px solid var(--filet);
}
@media (min-width:620px){.lieux{grid-template-columns:1fr 1fr;}}
@media (min-width:980px){.lieux{grid-template-columns:repeat(3,1fr);}}
.lieu{padding:1.35rem 0;border-bottom:1px solid var(--filet);}
.lieu h3{font-family:var(--f-display);font-size:1.4rem;line-height:1.15;
  letter-spacing:-.01em;margin:0;}
.lieu-ou{
  font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--carmin);margin:.4rem 0 0;
}
.lieu-quoi{font-size:.88rem;color:var(--pierre);margin:.35rem 0 0;}

.decors{
  display:grid;grid-template-columns:1fr;gap:0 var(--gut);
  margin-top:3rem;border-top:1px solid var(--filet-nuit);
}
@media (min-width:760px){.decors{grid-template-columns:1fr 1fr;}}
.decor{padding:1.5rem 0;border-bottom:1px solid var(--filet-nuit);}
.decor h3{font-family:var(--f-display);font-size:1.5rem;line-height:1.15;
  letter-spacing:-.01em;margin:0 0 .5rem;}
.decor p{color:rgba(241,242,243,.7);font-size:.94rem;line-height:1.65;max-width:46ch;}
.decor em{color:var(--craie);}

/* ---------- Bandeau pleine largeur ---------------------------------------
   Une respiration photographique au milieu d'une page dense. Hauteur bridée :
   l'image est un panoramique, la laisser libre en ferait un mur. */
.bandeau{display:block;}
.bandeau img{width:100%;height:clamp(13rem,24vw,22rem);object-fit:cover;}

/* ---------- Ajustements ponctuels ----------------------------------------
   Ces règles remplacent des attributs style="" : la CSP interdit le style
   inline (style-src 'self'), qui serait purement et simplement ignoré en
   production. Toute mise en forme doit passer par une classe. */
.sur-titre{
  font-family:var(--f-body);font-size:.72rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--pierre);
  margin:2.5rem 0 0;
}
.engagements--detache{margin-top:4rem;}
.lien-texte{color:var(--carmin);}
.coords .zone{font-size:1.05rem;font-family:var(--f-body);line-height:1.6;}
.t-page{font-size:clamp(2.2rem,4.5vw,3.6rem);}
.section--texte{padding-top:clamp(2.5rem,5vw,4rem);}
/* Après le média query de .formules, pour le surcharger à spécificité égale */
.formules--libre{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));}

/* ---------- Pages de texte (légal) --------------------------------------- */
.texte{max-width:44rem;}
.texte h2{font-family:var(--f-display);font-size:clamp(1.6rem,2.6vw,2.1rem);
  line-height:1.1;letter-spacing:-.01em;margin:3rem 0 1rem;padding-top:1.5rem;
  border-top:1px solid var(--filet);}
.texte h2:first-of-type{margin-top:2rem;}
.texte h3{font-family:var(--f-body);font-size:1rem;font-weight:700;margin:2rem 0 .5rem;}
.texte p,.texte li{color:var(--ardoise);max-width:none;}
.texte ul,.texte ol{padding-left:1.25rem;margin:0 0 1.15em;}
.texte li{margin-bottom:.5rem;}
.texte a{color:var(--carmin);}
.texte .maj{
  display:block;font-size:.78rem;color:var(--pierre);
  border-left:2px solid var(--filet);padding-left:1rem;margin:0 0 2rem;
}
/* À compléter par Youssef — visible, pour ne pas publier un trou par erreur */
.aremplir{
  background:rgba(168,135,78,.16);border-bottom:1px dashed var(--laiton);
  padding:0 .25rem;font-weight:600;font-style:normal;
}

/* ---------- Entrée du hero -----------------------------------------------
   Le texte se pose en cascade au chargement. L'IMAGE, elle, n'est pas animée
   volontairement : c'est le plus grand élément peint de la page, donc la
   mesure du LCP de Google. La faire apparaître en fondu retarderait ce score
   sans rien apporter — l'image est déjà là, et le texte vient s'y poser. */
@keyframes pose{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.js .hero h1{animation:pose .85s var(--ease) both;}
.js .hero .chapo{animation:pose .85s var(--ease) .12s both;}
.js .hero .actions{animation:pose .85s var(--ease) .22s both;}
@media (prefers-reduced-motion:reduce){
  .js .hero h1,.js .hero .chapo,.js .hero .actions{animation:none;}
}

/* ---------- Apparitions -------------------------------------------------- */
/* Masqué uniquement si le JS a pu poser la classe .js sur <html>.
   Sans JS, ou si le script échoue, le contenu reste visible : une animation
   ne doit jamais pouvoir faire disparaître une photo ou un tarif. */
.js .monte{opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);}
.js .monte.vu{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .monte{opacity:1;transform:none;transition:none;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}