/* =========================================================
   Studio A - photographe de mariage
   Feuille de style unique. Palette noir chaud / or / creme,
   relevee au pixel sur la maquette (03/09/2026).
   ========================================================= */

:root{
  --nuit:#0a0908;
  --nuit-2:#100e0c;
  --nuit-3:#17130f;
  --creme:#e7e1db;
  --creme-2:#dcd4ca;
  --creme-clair:#f1ece6;
  --or:#c9a074;
  --or-clair:#e0b78b;
  --or-pale:#f0d9bd;
  --or-sombre:#8a6a45;
  --texte:#f4f1ec;
  --texte-doux:#b4ada4;
  --texte-faible:#7e766c;
  --encre:#241f1b;
  --encre-doux:#5d544a;
  --encre-faible:#877d73;
  --serif:"Bodoni Moda",Didot,"Times New Roman",Georgia,serif;
  --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --max:1536px;
  --pad:clamp(1.35rem,6.25vw,6rem);
  --pad-entete:clamp(1.35rem,2.8vw,2.75rem);
  --entete-h:96px;
  --scene:100svh;
  /* bande creme en bas du heros : 133 px sur la maquette de 1536 x 1024 */
  --vague:clamp(56px,8.66vw,133px);
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:var(--entete-h);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--nuit);
  color:var(--texte);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.7;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.14;margin:0}
p{margin:0}
::selection{background:var(--or);color:#0a0908}
:focus-visible{outline:2px solid var(--or-clair);outline-offset:3px}

.contenu{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* le lien d'evitement doit redevenir visible quand il recoit le focus,
   sinon il ne sert qu'aux lecteurs d'ecran et pas a la navigation clavier */
.sr-only:focus{
  position:fixed;top:.7rem;left:.7rem;z-index:90;
  width:auto;height:auto;margin:0;padding:.85rem 1.3rem;overflow:visible;clip:auto;
  background:var(--nuit);color:var(--texte);border:1px solid var(--or);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
}

/* ---------- themes de section ----------
   Chaque section declare son fond et ses encres : les blocs communs
   (reserves d'image, filets, formulaires) s'y accordent sans etre
   redeclares deux fois. */

.sur-sombre{
  --fond:var(--nuit);--fond-2:var(--nuit-2);
  --encre-1:var(--texte);--encre-2:var(--texte-doux);--encre-3:var(--texte-faible);
  --trait:rgba(255,255,255,.11);
  --reserve-fond:rgba(255,255,255,.032);
}
.sur-clair{
  --fond:var(--creme);--fond-2:var(--creme-2);
  --encre-1:var(--encre);--encre-2:var(--encre-doux);--encre-3:var(--encre-faible);
  --trait:rgba(36,31,27,.18);
  --reserve-fond:rgba(36,31,27,.05);
}

.section{background:var(--fond);color:var(--encre-1);padding-block:clamp(4.5rem,9vw,8.5rem);position:relative}
.section--nuit-2{--fond:var(--nuit-2)}
.section--creme-clair{--fond:var(--creme-clair)}

/* ---------- vocabulaire commun ---------- */

.surtitre{
  font-size:clamp(.68rem,.85vw,.8rem);letter-spacing:.32em;text-transform:uppercase;
  color:var(--or);font-weight:400;margin:0 0 1.4rem;
}
.sur-clair .surtitre{color:var(--or-sombre)}

.titre-section{font-size:clamp(1.9rem,4vw,3.1rem);margin:0 0 1.5rem}
.chapeau{color:var(--encre-2);font-size:clamp(.98rem,1.1vw,1.06rem);max-width:56ch}

.entete-section{margin-bottom:clamp(2.5rem,5vw,4.5rem);max-width:64ch}
.entete-section--centre{margin-inline:auto;text-align:center;max-width:58ch}
.entete-section--centre .ornement{justify-content:center}
.entete-section--centre .chapeau{margin-inline:auto}

/* ornement : filet long, etoile, filet court (releve : 88 / 16 / 44 px) */
.ornement{display:flex;align-items:center;gap:.85rem;margin:0 0 1.9rem;color:var(--or)}
.ornement i{display:block;height:1px;background:currentColor;opacity:.6}
.ornement i:first-child{width:clamp(56px,5.7vw,88px)}
.ornement i:last-child{width:clamp(28px,2.9vw,44px)}
.ornement svg{width:16px;height:16px;flex-shrink:0}
.sur-clair .ornement{color:var(--or-sombre)}

/* ---------- boutons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font-family:var(--sans);font-size:.72rem;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;line-height:1;
  padding:1.15rem 1.9rem;border:1px solid rgba(255,255,255,.5);
  background:transparent;color:var(--texte);cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;
}
.btn:hover{background:var(--or);border-color:var(--or);color:#151009}
.btn--or{background:var(--or);border-color:var(--or);color:#151009}
.btn--or:hover{background:var(--or-clair);border-color:var(--or-clair)}
.btn--large{width:100%}
.sur-clair .btn{border-color:rgba(36,31,27,.35);color:var(--encre)}
.sur-clair .btn:hover{background:var(--encre);border-color:var(--encre);color:var(--creme-clair)}

/* lien souligne, style « Decouvrir mon univers » */
.lien-file{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or-clair);padding-bottom:.8rem;
  border-bottom:1px solid var(--or-sombre);
  transition:color .28s,border-color .28s;
}
.lien-file svg{width:15px;height:15px;transition:transform .28s}
.lien-file:hover{color:var(--or-pale);border-bottom-color:var(--or)}
.lien-file:hover svg{transform:translateX(5px)}
.sur-clair .lien-file{color:var(--or-sombre);border-bottom-color:rgba(138,106,69,.45)}
.sur-clair .lien-file:hover{color:var(--encre);border-bottom-color:var(--encre)}

/* ---------- en-tete ---------- */

.entete{
  position:fixed;inset:0 0 auto;z-index:60;
  background:rgba(10,9,8,0);border-bottom:1px solid transparent;
  transition:background .35s,border-color .35s,backdrop-filter .35s;
}
.entete.est-collee{
  background:rgba(10,9,8,.93);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:rgba(255,255,255,.08);
}
.entete__barre{
  display:flex;align-items:center;gap:clamp(1.2rem,3vw,2.6rem);
  min-height:var(--entete-h);
  max-width:var(--max);margin-inline:auto;padding-inline:var(--pad-entete);
}
/* Le monogramme est une image. Sa hauteur suit la meme courbe que l'ancien
   logotype dessine en Bodoni : 0,844 x l'ancienne taille de police, ce qui
   redonne au « A » la meme hauteur de capitale qu'avant, a toutes les largeurs. */
.marque{
  display:inline-flex;align-items:center;
  transition:opacity .28s;
}
.marque img{width:auto;height:clamp(1.86rem,2.7vw,2.62rem)}
.marque:hover{opacity:.78}

.nav{display:flex;align-items:center;gap:clamp(1.3rem,2.6vw,2.9rem);margin-left:auto}
.nav a{
  position:relative;font-size:.76rem;font-weight:300;letter-spacing:.19em;text-transform:uppercase;
  color:rgba(244,241,236,.78);padding-block:.7rem;transition:color .25s;
}
.nav a:hover{color:var(--texte)}
.nav a[aria-current="page"]{color:var(--or-pale)}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:50%;bottom:.05rem;
  width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--or);
}
.entete .btn{padding:1.05rem 1.6rem;font-size:.68rem}

.burger{display:none;background:none;border:0;padding:.5rem;margin-left:auto;cursor:pointer;color:var(--texte)}
.burger svg{width:26px;height:26px}

@media (max-width:1100px){
  .nav,.entete__barre .btn{display:none}
  .burger{display:block}
  .entete{background:rgba(10,9,8,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:rgba(255,255,255,.08)}
}

/* menu mobile */
/* menu ferme : « visibility:hidden » en plus du deplacement, sinon ses liens
   restent atteignables au clavier alors que le panneau est aria-hidden */
.menu-mobile{
  position:fixed;inset:0;z-index:70;background:var(--nuit);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad-entete);
  transform:translateY(-100%);visibility:hidden;
  transition:transform .45s cubic-bezier(.7,0,.2,1),visibility .45s;
}
.menu-mobile[data-ouvert="true"]{transform:translateY(0);visibility:visible}
.menu-mobile__fermer{
  position:absolute;top:26px;right:var(--pad-entete);
  background:none;border:0;color:var(--texte);cursor:pointer;padding:.5rem;
}
.menu-mobile__fermer svg{width:26px;height:26px}
.menu-mobile nav{display:flex;flex-direction:column}
/* « nav » est indispensable : sans lui, cette regle l'emportait aussi sur le
   bouton dore du bas (elle est plus specifique que .btn), qui sortait en
   Bodoni 24 px, passait sur deux lignes et gardait un filet sous lui.
   Et « :last-of-type » designait le bouton, donc le filet du dernier lien
   du menu n'etait jamais retire. */
.menu-mobile nav a{
  font-family:var(--serif);font-size:clamp(1.45rem,6.6vw,2.1rem);
  padding-block:.55rem;border-bottom:1px solid rgba(255,255,255,.09);
}
.menu-mobile nav a:last-of-type{border-bottom:0}
.menu-mobile .btn{margin-top:2.2rem;align-self:flex-start}

/* ---------- heros ---------- */

.heros{position:relative;background:var(--nuit);overflow:hidden}
.heros__image{position:absolute;inset:0;z-index:0}
.heros__image img{width:100%;height:100%;object-fit:cover;object-position:64% 50%}
.heros__voile{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(6,5,5,.97) 0%,rgba(6,5,5,.94) 26%,rgba(6,5,5,.62) 46%,rgba(6,5,5,.14) 68%,rgba(6,5,5,0) 100%),
    linear-gradient(0deg,rgba(6,5,5,.80) 0%,rgba(6,5,5,0) 30%),
    linear-gradient(180deg,rgba(6,5,5,.50) 0%,rgba(6,5,5,0) 20%);
}

/* Les marges de cette scene sont calees pour que le heros entier — texte,
   citation, bande creme et pastille — tienne dans une fenetre au format de
   la maquette (1536 x 1024). Les agrandir remet la bande creme sous la
   ligne de flottaison, ce qui n'est pas ce que montre le modele. */
.heros__interieur{
  position:relative;z-index:2;
  min-height:var(--scene);
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1.9rem,4vh,4.4rem);
  padding-top:calc(var(--entete-h) + clamp(1.75rem,8vh,5.5rem));
  padding-bottom:calc(var(--vague) - clamp(0px,1.2vh,14px));
}

.heros__texte{max-width:min(46rem,52vw)}
.heros .surtitre{color:var(--or-clair);letter-spacing:.34em;margin-bottom:1.6rem}
/* Releve sur la maquette : « VOTRE HISTOIRE. » mesure 619 px de large pour
   une hauteur de capitale de 57 px sur 1536 px de large. Bodoni Moda, la
   police la plus proche du dessin, est un peu plus large : l'approche
   negative de -.05em ramene la ligne a la largeur du modele. */
.heros h1{
  font-size:clamp(2.15rem,4.95vw,4.75rem);line-height:1.18;
  letter-spacing:-.05em;text-transform:uppercase;margin:0 0 1.6rem;
}
.heros .ornement{margin-bottom:1.55rem}
.heros h1 span{display:block}
.heros h1 .est-or{color:var(--or)}
.heros__accroche{
  color:#d9d5cf;font-size:clamp(.98rem,1.15vw,1.12rem);line-height:1.65;
  max-width:32ch;margin-bottom:2.1rem;
}
.heros .lien-file{padding-bottom:.6rem}

/* bloc citation, bas du heros */
.heros__signature{display:flex;align-items:flex-end;gap:clamp(1.6rem,3.2vw,3.6rem)}
.arche{
  flex-shrink:0;width:clamp(120px,11vw,168px);
  border:1px solid var(--or-sombre);
  border-radius:999px 999px 0 0;
  overflow:hidden;
}
.arche .reserve{border:0;background:rgba(8,7,6,.62)}
.citation{max-width:34ch}
.citation__marque{
  display:block;font-family:var(--sans);font-weight:600;font-size:2.9rem;line-height:.62;
  color:var(--or-clair);margin-bottom:1.5rem;
}
.citation p{color:#e2dfda;font-size:clamp(.95rem,1.1vw,1.06rem);line-height:1.75}
.citation__auteur{display:flex;align-items:center;gap:.9rem;margin-top:1.9rem}
.citation__auteur i{display:block;width:26px;height:1px;background:var(--texte-doux);flex-shrink:0}
.citation__auteur b{font-family:var(--sans);font-weight:400;font-size:.84rem;letter-spacing:.2em;text-transform:uppercase}
.citation__role{
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--or);
  margin-top:.5rem;margin-left:calc(26px + .9rem);
}

/* colonne « defiler » */
.defiler{
  position:absolute;z-index:3;right:clamp(1rem,2.6vw,2.8rem);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  color:var(--texte);pointer-events:none;
}
.defiler b{font-family:var(--sans);font-weight:300;font-size:.82rem;letter-spacing:.1em}
.defiler i{display:block;width:1px;height:clamp(40px,6vh,58px);background:rgba(255,255,255,.55)}
/* la maquette fait lire ce mot de bas en haut : rotation de 180 degres
   par-dessus l'ecriture verticale, qui sinon se lit de haut en bas */
.defiler span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--or-clair);
}

/* vague creme + pastille etoilee */
.heros__vague{position:absolute;left:0;right:0;bottom:-1px;z-index:4;width:100%;height:var(--vague);display:block}
.heros__badge{
  position:absolute;z-index:5;left:50%;bottom:clamp(11px,1.63vw,25px);
  width:clamp(52px,6.4vw,98px);height:clamp(52px,6.4vw,98px);
  transform:translateX(-50%);
  border-radius:50%;border:1px solid var(--or-sombre);
  background:#0d0b09;color:var(--or-clair);
  display:grid;place-items:center;
}
.heros__badge svg{width:46%;height:46%}

/* ---------- reserves d'image ---------- */

.reserve{
  position:relative;width:100%;aspect-ratio:var(--rapport,3/2);
  background:var(--reserve-fond);border:1px solid var(--trait);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.8rem;padding:1.1rem;text-align:center;color:var(--encre-3);
}
.reserve svg{width:clamp(22px,2.4vw,30px);height:clamp(22px,2.4vw,30px);opacity:.8}
.reserve span{font-size:.63rem;letter-spacing:.22em;text-transform:uppercase;line-height:1.6}

/* ---------- portfolio ---------- */

.mosaique{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.9rem,1.5vw,1.6rem)}
.mosaique>*{grid-column:span 2}
.mosaique>*:nth-child(1),.mosaique>*:nth-child(2){grid-column:span 3}
.mosaique>*:nth-child(6){grid-column:span 6}
.portfolio__pied,.journal__pied{margin-top:clamp(2.2rem,4vw,3.4rem)}

/* ---------- prestations ---------- */

.prestations{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.4vw,2.4rem)}
.prestation__corps{padding-top:1.7rem}
.prestation h3{font-size:clamp(1.3rem,1.8vw,1.65rem);margin-bottom:.85rem}
.prestation p{color:var(--encre-2);font-size:.96rem}

/* ---------- deroule en etapes ---------- */

.etapes{
  margin-top:clamp(3rem,6vw,5.5rem);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--trait);border:1px solid var(--trait);
}
.etape{background:var(--fond);padding:clamp(1.6rem,2.4vw,2.3rem);transition:background .3s}
.etape:hover{background:var(--fond-2)}
.etape__ico{width:24px;height:24px;color:var(--or);margin-bottom:1.5rem}
.sur-clair .etape__ico{color:var(--or-sombre)}
.etape__num{
  display:block;font-family:var(--serif);font-size:1.05rem;letter-spacing:.2em;
  color:var(--or-sombre);margin-bottom:.7rem;
}
.etape h3{font-size:clamp(1.1rem,1.4vw,1.32rem);margin-bottom:.75rem}
.etape p{color:var(--encre-2);font-size:.92rem;line-height:1.65}

/* ---------- temoignage ---------- */

.temoignage{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.temoignage blockquote{margin:0}
.temoignage blockquote p{
  font-family:var(--serif);font-size:clamp(1.25rem,2.1vw,1.9rem);line-height:1.42;color:var(--encre-1);
}
.temoignage footer{
  margin-top:1.8rem;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--encre-3);
}
.a-remplir{
  border-bottom:1px dashed var(--trait);color:var(--encre-3);
  font-family:var(--sans);font-size:.92rem;font-style:italic;line-height:1.7;
}

/* ---------- a propos ---------- */

.apropos{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2rem,5vw,4.8rem);align-items:center}
.apropos__portrait{border:1px solid var(--trait);border-radius:999px 999px 0 0;overflow:hidden}
.apropos__portrait .reserve{border:0}
.apropos p{color:var(--encre-2)}
.apropos p+p{margin-top:1.1rem}
.apropos__signe{margin-top:2.4rem}
.apropos__signe b{display:block;font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--or)}
.sur-clair .apropos__signe b{color:var(--or-sombre)}

/* ---------- journal ---------- */

.vignettes{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.9rem,1.5vw,1.6rem)}

/* ---------- contact ---------- */

.contact{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:clamp(2.5rem,6vw,5.5rem)}

.voies{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;gap:1.5rem}
.voies li{display:flex;gap:1.1rem;align-items:flex-start}
.voies svg{width:20px;height:20px;color:var(--or);flex-shrink:0;margin-top:.4rem}
.voies span{display:block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--encre-3);margin-bottom:.15rem}
.voies a,.voies p{font-size:1.02rem;color:var(--encre-1)}
.voies a:hover{color:var(--or-clair)}

.form{display:grid;gap:1.4rem}
.form__duo{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.champ{display:grid;gap:.55rem}
.champ label{font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--encre-3)}
.champ input,.champ select,.champ textarea{
  width:100%;background:rgba(255,255,255,.035);color:var(--texte);
  border:1px solid var(--trait);border-radius:0;
  padding:1rem 1.1rem;font-family:var(--sans);font-size:.98rem;font-weight:300;
  transition:border-color .25s,background .25s;
}
.champ textarea{min-height:140px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  outline:none;border-color:var(--or);background:rgba(255,255,255,.06);
}
.champ select{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#c9a074 50%),linear-gradient(135deg,#c9a074 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.champ select option{background:var(--nuit-2);color:var(--texte)}
.champ input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.55);cursor:pointer}
.form__pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__mention{font-size:.78rem;color:var(--encre-3);line-height:1.65}
.form__etat{font-size:.9rem;color:var(--or-clair);min-height:1.5em}

/* ---------- pied de page ---------- */

.pied{background:var(--nuit-2);border-top:1px solid rgba(255,255,255,.08);padding-block:clamp(3rem,5vw,4.5rem) 2rem;color:var(--texte)}
.pied__haut{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:2.8rem;padding-bottom:2.8rem;border-bottom:1px solid rgba(255,255,255,.08)}
.pied__marque{display:block;margin:3px 0 21px}
.pied__marque img{width:auto;height:2.19rem}
.pied p{color:var(--texte-doux);font-size:.92rem;max-width:42ch}
.pied h2{font-family:var(--sans);font-size:.66rem;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:var(--or-clair);margin:0 0 1.2rem}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.pied ul a{font-size:.92rem;color:var(--texte-doux);transition:color .22s}
.pied ul a:hover{color:var(--texte)}
.pied__bas{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;padding-top:1.9rem}
.pied__bas p,.pied__bas a{font-size:.78rem;color:var(--texte-faible)}
.pied__bas a:hover{color:var(--texte-doux)}

/* ---------- apparition au defilement ---------- */

.js .apparait{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.js .apparait.est-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .apparait{opacity:1;transform:none;transition:none}
}

/* ---------- page annexe ---------- */

.page-texte{padding-block:calc(var(--entete-h) + clamp(3rem,7vh,5rem)) clamp(4rem,8vw,6rem)}
.page-texte h1{font-size:clamp(2rem,5vw,3.1rem);margin-bottom:2rem}
.page-texte h2{font-size:1.35rem;margin:2.8rem 0 .9rem;color:var(--or-clair)}
.page-texte p,.page-texte li{color:var(--texte-doux);font-size:.98rem}
.page-texte p+p{margin-top:.85rem}
.page-texte ul{padding-left:1.2rem;display:grid;gap:.5rem;margin:.6rem 0 0}
.page-texte a{color:var(--or-clair);text-decoration:underline;text-underline-offset:3px}
.page-texte .bloc{max-width:76ch}

/* =========================================================
   REDUCTION (<= 1000 px) - la composition du grand ecran, en plus petit
   ---------------------------------------------------------
   Principe : l'ecran de reference fait 1280 px. Chaque valeur ci-dessous est
   la mesure relevee a 1280 px divisee par 12,8, donc exprimee en vw. La page
   garde ainsi EXACTEMENT sa composition - photo du heros en fond avec le
   texte pose dessus a gauche, arche et citation cote a cote, mosaique de six
   colonnes, rangee de trois prestations, rangee de quatre etapes, portrait a
   gauche et texte a droite, texte a gauche et formulaire a droite, pied en
   trois colonnes - et ne fait que retrecir. Rien ne change de place ni
   d'ordre.
   Chaque clamp() porte un PLANCHER EN PIXELS : sans lui, a 375 px, 1,2vw
   tomberait a 4,5 px. Le plancher est a 11 px pour tout texte.
   minmax(0,1fr) sur toutes les grilles : sans lui un mot insecable impose sa
   largeur a la colonne et pousse la grille hors de l'ecran.
   Ce bloc doit rester en fin de feuille : plusieurs @media plus haut portent
   les memes selecteurs et, a specificite egale, c'est le dernier qui gagne.
   ========================================================= */

@media (max-width:1100px){
  /* le cadrage change avec la fenetre : sous 1100 px, le voile blanc de la
     mariee remonte sous la citation et le texte clair devenait illisible.
     Le degrade est prolonge vers la droite pour garder le contraste.
     Il ne deplace rien : c'est un reglage de contraste, pas de composition. */
  .heros__voile{
    background:
      linear-gradient(90deg,rgba(6,5,5,.97) 0%,rgba(6,5,5,.94) 34%,rgba(6,5,5,.80) 56%,rgba(6,5,5,.36) 78%,rgba(6,5,5,0) 100%),
      linear-gradient(0deg,rgba(6,5,5,.80) 0%,rgba(6,5,5,0) 30%),
      linear-gradient(180deg,rgba(6,5,5,.50) 0%,rgba(6,5,5,0) 20%);
  }
}

@media (max-width:1000px){

  /* --- reglages d'ensemble --- */
  .section{padding-block:clamp(20px,9vw,136px)}
  /* bande creme du bas du heros : 110,8 px a 1280, soit 8,66vw */
  :root{--vague:clamp(24px,8.66vw,133px)}

  /* --- vocabulaire commun ---
     L'interlettrage des capitales est divise par deux a trois : c'est lui, et
     non le corps, qui fait deborder un intitule d'une colonne etroite. */
  .surtitre{font-size:clamp(11px,.85vw,12.8px);letter-spacing:.16em;margin-bottom:clamp(4px,2vw,25.6px)}
  .titre-section{font-size:clamp(15px,3.875vw,49.6px);margin-bottom:clamp(4px,1.875vw,24px)}
  .chapeau{font-size:clamp(11px,1.225vw,16.96px)}
  .entete-section{margin-bottom:clamp(12px,5vw,72px)}
  .ornement{gap:clamp(3px,1.06vw,13.6px);margin-bottom:clamp(5px,1.94vw,30.4px)}
  .ornement i:first-child{width:clamp(14px,5.7vw,88px)}
  .ornement i:last-child{width:clamp(7px,2.9vw,44px)}
  .ornement svg{width:clamp(7px,1.25vw,16px);height:clamp(7px,1.25vw,16px)}

  .btn{
    font-size:clamp(11px,.85vw,12.8px);letter-spacing:.1em;
    gap:clamp(3px,.875vw,11.2px);
    padding:clamp(5px,1.31vw,18.4px) clamp(7px,2vw,30.4px);
  }
  /* le menu mobile n'est pas de la composition de page : ses liens et son
     bouton restent des cibles tactiles, ils ne suivent pas la reduction */
  .menu-mobile .btn{font-size:.78rem;letter-spacing:.16em;padding:1.05rem 2.1rem;gap:.6rem}
  .lien-file{
    font-size:clamp(11px,.925vw,11.84px);letter-spacing:.08em;
    gap:clamp(3px,.875vw,11.2px);padding-bottom:clamp(3px,.75vw,12.8px);
  }
  .lien-file svg{width:clamp(8px,1.17vw,15px);height:clamp(8px,1.17vw,15px)}

  /* --- heros : photo en fond, texte pose dessus a gauche ---
     La colonne de texte garde ses 52vw du grand ecran ; la scene garde sa
     hauteur d'ecran. Rien ne descend sous la photo. */
  .heros__texte{max-width:52vw}
  .heros .surtitre{font-size:clamp(11px,.85vw,12.8px);letter-spacing:.14em;margin-bottom:clamp(4px,2vw,25.6px)}
  .heros h1{font-size:clamp(11px,4.95vw,76px);margin-bottom:clamp(4px,2vw,25.6px)}
  .heros .ornement{margin-bottom:clamp(5px,1.94vw,30.4px)}
  .heros__accroche{font-size:clamp(11px,1.225vw,17.92px);margin-bottom:clamp(5px,2.63vw,33.6px);max-width:32ch}
  .heros .lien-file{padding-bottom:clamp(3px,.75vw,9.6px)}

  /* arche et citation cote a cote, alignees par le bas comme sur le modele */
  .heros__signature{gap:clamp(6px,3.2vw,57.6px)}
  /* Plancher a 60 px et non a 11vw (41 px a 375). Mesure : l'intitule de la
     reserve, PHOTOGRAPHIE, fait 80,7 px au plancher de 11 px. Dans une arche de
     44 px il ne reste que 31,7 px de large, la reserve deborde en hauteur et le
     cadre sort de son rapport 3:4 (42 x 83 mesures, soit 0,50 au lieu de 0,75) :
     le gabarit d'image ne montre plus le format qu'il annonce. A 60 px, la
     cesure coupe le mot en deux (PHOTO- / GRAPHIE, 46,9 px) et les quatre lignes
     tiennent dans les 77 px de haut du rapport 3:4. L'arche pese alors 16 % de
     la rangee au lieu de 11 % sur grand ecran : c'est le seul ecart de
     proportion assume de la reduction, et il s'arrete a 545 px de large. */
  .arche{width:clamp(60px,11vw,168px)}
  /* dans une arche etroite, la reserve n'a plus de place pour un intitule
     espace : interlettrage nul et coupure aux points de cesure du francais */
  .arche .reserve span{letter-spacing:normal;hyphens:auto;overflow-wrap:break-word}
  /* Le navigateur pose 40 px de retrait a gauche et a droite de tout
     « blockquote ». Fixes, ils ne suivaient pas la reduction : a 375 px ils
     mangeaient 80 px des 272 px de la citation, la parole se lisait alors sur
     192 px quand le nom de l'auteur, hors du blockquote, partait du bord. Mis
     a l'echelle, ils valent 40 px a 1280 px, comme sur grand ecran. */
  .heros blockquote{margin-inline:clamp(3px,3.125vw,40px)}
  .citation__marque{font-size:clamp(14px,3.625vw,46.4px);margin-bottom:clamp(4px,1.875vw,24px)}
  .citation p{font-size:clamp(11px,1.1875vw,16.96px)}
  .citation__auteur{gap:clamp(4px,1.125vw,14.4px);margin-top:clamp(6px,2.375vw,30.4px)}
  .citation__auteur i{width:clamp(8px,2.03vw,26px)}
  .citation__auteur b{font-size:clamp(11px,1.05vw,13.44px);letter-spacing:.08em}
  .citation__role{letter-spacing:.09em;margin-left:calc(clamp(8px,2.03vw,26px) + clamp(4px,1.125vw,14.4px))}

  /* colonne « defiler » : elle fait partie de l'architecture du modele, elle
     reste a droite de la scene, en reduction */
  /* A 1280 px ce rail tient TOUT ENTIER dans la marge laterale de la page :
     33,3 px de bord plus 20 px de large, pour 80 px de marge. Sa largeur, elle,
     ne descend pas avec la fenetre - les deux textes qu'il porte sont au
     plancher de 11 px sous 1073 px - alors que la marge, elle, descend a
     23,4 px a 375 px et 21,6 px a 320 px. Le rail entre donc dans la colonne de
     texte. Mesure avant correction : a 375 px la citation s'arretait a 0,5 px
     du rail, a 320 px sa boite le chevauchait de 3,1 px (les glyphes se
     manquaient de 0,45 px, donc aucun controle automatique ne le voyait). La
     rangee du bas du heros reserve maintenant la place du rail : bord + 19 px
     de large + 8 px de garde. Sans effet au-dessus de 740 px, ou la marge de
     page est deja plus large que le rail. */
  .heros__bas{padding-right:max(var(--pad),calc(clamp(1rem,2.6vw,2.8rem) + 27px))}
  .defiler{gap:clamp(4px,1.375vw,17.6px)}
  .defiler b{font-size:clamp(11px,1.025vw,13.12px)}
  .defiler i{height:clamp(10px,4.53vw,58px)}
  .defiler span{font-size:clamp(11px,.85vw,12.8px);letter-spacing:.14em}
  .heros__badge{
    width:clamp(22px,6.4vw,98px);height:clamp(22px,6.4vw,98px);
    bottom:clamp(4px,1.63vw,25px);
  }

  /* --- reserves d'image --- */
  .reserve{gap:clamp(3px,1vw,12.8px);padding:clamp(3px,1.375vw,17.6px)}
  .reserve svg{width:clamp(10px,2.34vw,30px);height:clamp(10px,2.34vw,30px)}
  /* Interlettrage a .05em et non .08em. Mesure : « PHOTOGRAPHIE » fait 80,7 px
     au plancher de 11 px, et la colonne d'une carte de prestation en offre 91,1
     a 375 px. A .08em l'intitule mesure 91,3 px : il passait de 0,2 px, et la
     moindre reduction de largeur le coupait en deux. A .05em il mesure 87,3 px
     et tient entier jusqu'a 360 px de large. En dessous, la cesure le coupe a
     un point du dictionnaire francais (PHOTOGRA-PHIE) au lieu de le laisser
     sortir de son cadre - a 320 px il en sortait de 6,4 px de chaque cote. */
  .reserve span{font-size:clamp(11px,.7875vw,12.8px);letter-spacing:.05em;line-height:1.35;hyphens:auto}

  /* --- portfolio : la mosaique reste sur six colonnes, memes fusions --- */
  .mosaique{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(3px,1.5vw,19.2px)}
  .portfolio__pied,.journal__pied{margin-top:clamp(8px,4vw,54.4px)}

  /* --- prestations : la rangee de trois reste une rangee de trois --- */
  .prestations{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(5px,2.4vw,38.4px)}
  .prestation__corps{padding-top:clamp(5px,2.125vw,27.2px)}
  /* pas de cesure ici : a 375 px la colonne offre 103 px et le mot le plus
     long, « preparatifs », en mesure 63 - il n'y a rien a couper */
  .prestation h3{font-size:clamp(11px,1.8vw,26.4px);margin-bottom:clamp(3px,1.06vw,13.6px);overflow-wrap:break-word}
  .prestation p{font-size:clamp(11px,1.2vw,15.36px);overflow-wrap:break-word}

  /* --- deroule : la rangee de quatre reste une rangee de quatre jusqu'a
     560 px ; en dessous elle passe a deux (voir le bloc <= 560 px, plus bas) --- */
  .etapes{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(12px,6vw,88px)}
  .etape{padding:clamp(5px,2.4vw,36.8px)}
  .etape__ico{width:clamp(11px,1.875vw,24px);height:clamp(11px,1.875vw,24px);margin-bottom:clamp(4px,1.875vw,24px)}
  .etape__num{font-size:clamp(11px,1.3125vw,16.8px);letter-spacing:.08em;margin-bottom:clamp(3px,.875vw,11.2px)}
  /* Le corps est au plancher de 11 px et la marge interieure de la carte vaut
     2,4vw, la meme part qu'a 1280 px. « hyphens:auto » avec lang="fr" coupe aux
     points du dictionnaire (en-ga-ge-ment, te-le-char-ger) ; « overflow-wrap »
     reste en dernier recours. Ces trois reglages suffisent jusqu'a 560 px ; en
     dessous, la rangee passe a deux colonnes (bloc <= 560 px). */
  .etape h3{font-size:clamp(11px,1.4vw,21.12px);margin-bottom:clamp(3px,.9375vw,12px);hyphens:auto;overflow-wrap:break-word}
  .etape p{font-size:clamp(11px,1.15vw,14.72px);hyphens:auto;overflow-wrap:break-word}

  /* --- temoignage : photo a gauche, parole a droite --- */
  .temoignage{gap:clamp(10px,5vw,72px)}
  .temoignage blockquote p,.a-remplir{font-size:clamp(11px,2.1vw,30.4px)}
  .temoignage footer{font-size:clamp(11px,.925vw,11.84px);letter-spacing:.08em;margin-top:clamp(6px,2.25vw,28.8px)}

  /* --- a propos : portrait a gauche, texte a droite --- */
  /* « align-items:start » au lieu de « center ». Sur grand ecran le portrait EST
     la hauteur du bloc (519,2 px pour une rangee de 519,2 px a 1440) : le
     centrage ne se voit pas. Reduit, le rapport s'inverse - le portrait ne fait
     plus que 134,8 px pour une rangee de 397,7 px a 375 px, 113,6 px pour 448,3
     a 320 px - et le centrage le laissait flotter au milieu du vide : 155,4 px
     de blanc au-dessus de lui a 375 px, 191,3 px a 320 px, soit une fois et
     demie sa propre hauteur. Cale en haut, il retrouve la ligne de tete commune
     avec le texte, qui est ce que montre le grand ecran. Meme correction que
     sur le site de phare (bloc « avant / apres »). Le temoignage n'en a pas
     besoin : sa photo y est le plus haut des deux a toutes les largeurs
     (150,8 px pour 150,8 a 375, 308,9 pour 308,9 a 768). */
  .apropos{gap:clamp(10px,5vw,76.8px);align-items:start}
  .apropos p:not(.surtitre):not(.apropos__signe){font-size:clamp(11px,1.25vw,16px)}
  .apropos p+p{margin-top:clamp(4px,1.375vw,17.6px)}
  .apropos__signe b{font-size:clamp(11px,2vw,25.6px)}

  /* --- journal : la rangee de quatre vignettes reste une rangee de quatre --- */
  .vignettes{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(3px,1.5vw,19.2px)}

  /* --- contact : texte a gauche, formulaire a droite --- */
  .contact{gap:clamp(10px,6vw,88px)}
  .voies{margin-top:clamp(8px,3vw,38.4px);gap:clamp(5px,1.875vw,24px)}
  .voies li{gap:clamp(4px,1.375vw,17.6px)}
  .voies svg{width:clamp(11px,1.5625vw,20px);height:clamp(11px,1.5625vw,20px);margin-top:clamp(2px,.5vw,6.4px)}
  .voies span{font-size:clamp(11px,.825vw,12.8px);letter-spacing:.08em}
  /* l'adresse de courriel est un mot de 19 signes : sans coupure elle sort de
     sa colonne */
  .voies a,.voies p{font-size:clamp(11px,1.275vw,16.32px);overflow-wrap:anywhere}

  .form{gap:clamp(5px,1.75vw,22.4px)}
  .form__duo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(5px,1.75vw,22.4px)}
  .champ{gap:clamp(2px,.6875vw,8.8px)}
  .champ label{font-size:clamp(11px,.825vw,12.8px);letter-spacing:.06em}
  .champ input,.champ select,.champ textarea{
    padding:clamp(4px,1.25vw,16px) clamp(4px,1.375vw,17.6px);
    font-size:clamp(11px,1.225vw,15.68px);
  }
  /* le champ de date porte un gabarit natif (jj/mm/aaaa + icone) : sans
     min-width:0 il impose sa largeur a la colonne et pousse la grille */
  .champ input[type="date"]{min-width:0}
  /* Plancher a 62 px : a 48 px la boite ne montrait que deux lignes et demie
     du texte d'exemple, la troisieme etait coupee en son milieu. 62 px = trois
     lignes entieres de 16,5 px plus les marges interieures et le filet. */
  .champ textarea{min-height:clamp(62px,10.9375vw,140px)}
  .champ select{
    background-position:calc(100% - clamp(6px,1.484vw,19px)) 50%,calc(100% - clamp(4px,1.094vw,14px)) 50%;
  }
  .form__mention{font-size:clamp(11px,.975vw,12.48px)}
  .form__etat{font-size:clamp(11px,1.125vw,14.4px)}

  /* --- pied de page : trois colonnes, puis la ligne du bas en deux --- */
  .pied{padding-block:clamp(14px,5vw,72px) clamp(8px,2.5vw,32px)}
  .pied__haut{
    grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);
    gap:clamp(7px,3.5vw,44.8px);padding-bottom:clamp(12px,3.5vw,44.8px);
  }
  .pied__marque{margin:0 0 clamp(4px,1.64vw,21px)}
  .pied__marque img{height:clamp(14px,2.7375vw,35.04px)}
  .pied p{font-size:clamp(11px,1.15vw,14.72px)}
  .pied h2{font-size:clamp(11px,.825vw,12.8px);letter-spacing:.07em;margin-bottom:clamp(4px,1.5vw,19.2px)}
  .pied ul{gap:clamp(3px,.9375vw,12px)}
  .pied ul a{font-size:clamp(11px,1.15vw,14.72px);overflow-wrap:anywhere;line-height:1.4;display:inline-block}
  .pied__bas{gap:clamp(3px,1vw,12.8px) clamp(6px,2.5vw,32px);padding-top:clamp(6px,2.375vw,30.4px)}
  /* base de 48 % : les deux mentions restent sur la MEME ligne, comme sur
     grand ecran, au lieu de se mettre l'une sous l'autre */
  .pied__bas p{font-size:clamp(11px,.975vw,12.48px);flex:0 1 48%}
  .pied__bas p:last-child{text-align:right}

  /* page annexe (mentions legales) */
  .page-texte h1{font-size:clamp(15px,3.875vw,49.6px);margin-bottom:clamp(8px,2.5vw,32px)}
  .page-texte h2{font-size:clamp(11px,1.6875vw,21.6px);margin:clamp(10px,3.5vw,44.8px) 0 clamp(4px,1.125vw,14.4px)}
  .page-texte p,.page-texte li{font-size:clamp(11px,1.225vw,15.68px)}
  .page-texte p+p{margin-top:clamp(3px,1.0625vw,13.6px)}
}

/* ---- ecran etroit et haut : la photo du heros est servie ENTIERE ----
   Avant : la photo etait un fond en « object-fit:cover » sur une boite d'une
   hauteur d'ecran. Sur un telephone cette boite fait 390 x 844 (rapport 0,46)
   pour une image de rapport 1,5 : le navigateur n'en gardait qu'une bande
   verticale. Part de la LARGEUR du fichier encore visible, mesuree :
     1440 x 900   100 %   (le grand ecran montre la scene entiere)
     1200 x 900    89 %
      768 x 1024   50 %
      390 x 844    46 % du fichier carre alors servi (31 % pour le paysage)
   On ne voyait plus la scene - les cypres, la balustrade, la baie, la vasque -
   mais un gros plan sur le couple et le voile.
   Ici la photo n'est plus un fond recadre : c'est une image de la grille, a sa
   largeur d'ecran et a SA hauteur reelle (100vw de large, 66,67vw de haut).
   Aucun rognage : ce qu'on voit a 390 px est exactement ce qu'on voit a 1440 px,
   en plus petit. Le texte est dans la MEME cellule de grille, cale en haut : il
   reste pose sur la photo comme sur grand ecran, et il a le droit de finir sous
   elle, sur le fond de la section. Rien ne change de place ni d'ordre.
   La photo commence sous la barre d'en-tete (96 px), qui est opaque en dessous
   de 1100 px : sinon le haut de la scene passerait derriere elle.

   Condition : « pas le bureau » ET « fenetre plus haute que large de plus d'un
   quart ». C'est le rapport de la fenetre, et non sa largeur, qui decide de ce
   que « cover » sacrifie : a 844 x 390 (le meme telephone couche) il ne rogne
   plus rien en largeur, le fond pleine page reste alors le bon reglage. La
   borne de largeur reprend celle a laquelle la navigation passe deja au menu
   plie, donc 1100 px : le bureau (1200 et 1440 px) n'est jamais concerne, et
   les tablettes en portrait (768, 820, 834, 1024 px) le sont toutes. */
@media (max-width:1100px) and (max-aspect-ratio:5/4){

  .heros{display:grid;grid-template-columns:minmax(0,1fr)}

  .heros__image{
    position:relative;inset:auto;grid-area:1/1;align-self:start;
    z-index:0;padding-top:var(--entete-h);
  }
  /* height:auto - la boite prend le rapport reel du fichier, donc le navigateur
     n'a plus rien a rogner ; « object-fit » n'a plus d'objet. */
  .heros__image img{height:auto;object-fit:fill}

  /* Le voile de contraste suit desormais la photo et non plus toute la section :
     pose en pseudo-element de la photo, il en epouse exactement la boite, quelle
     que soit la largeur. Le degrade horizontal noircit la colonne de gauche, ou
     se lit le texte ; le degrade du bas raccorde le bord de la photo au fond de
     la section, qui sans lui laissait un trait net en travers du voile de la
     mariee. */
  .heros__voile{display:none}
  .heros__image::after{
    content:"";position:absolute;inset:var(--entete-h) 0 0;pointer-events:none;
    background:
      linear-gradient(90deg,rgba(6,5,5,.95) 0%,rgba(6,5,5,.90) 30%,rgba(6,5,5,.62) 50%,rgba(6,5,5,.22) 74%,rgba(6,5,5,0) 94%),
      linear-gradient(0deg,var(--nuit) 0%,rgba(10,9,8,.74) 9%,rgba(10,9,8,0) 27%),
      linear-gradient(180deg,rgba(6,5,5,.5) 0%,rgba(6,5,5,0) 30%);
  }

  /* Meme cellule que la photo, cale en haut : le texte se pose sur elle au lieu
     d'etre centre dans la hauteur d'ecran. La rangee du bas garde sa place au
     bas de la scene, au-dessus de la bande creme, comme sur grand ecran. */
  .heros__interieur{
    grid-area:1/1;align-self:start;
    min-height:auto;
    justify-content:flex-start;
    gap:clamp(1.9rem,9vh,5rem);
    padding-top:calc(var(--entete-h) + clamp(6px,1.8vh,22px));
    padding-bottom:calc(var(--vague) + clamp(12px,3.4vh,34px));
  }
}

/* ---- sous 560 px : le deroule passe de quatre colonnes a deux ----
   C'est la seule perte de colonne de toute la reduction, et elle est prise
   apres avoir epuise l'ordre habituel : corps deja au plancher de 11 px,
   gouttiere deja a 1 px, marge interieure de la carte deja a sa part exacte du
   grand ecran (2,4vw), cesure francaise deja permise.
   Ce qui reste de texte dans une colonne, et ce que le paragraphe le plus long
   y devient (« Vos images dans une galerie privee... », 110 signes) :
     1440 px  244,9 px de texte   3 a 4 lignes   28 a 33 signes par ligne
      768 px  130,1 px           5 a 6 lignes   17 a 20 signes
      620 px  104,2 px           5 a 7 lignes   13 a 20 signes
      560 px   94,1 px           6 a 7 lignes   12 a 16 signes
      500 px   84,0 px           7 a 11 lignes  10 a 13 signes
      430 px   72,4 px           8 a 11 lignes   8 a 12 signes
      375 px   63,0 px          10 a 15 lignes   7 a 10 signes
      320 px   52,6 px          12 a 14 lignes   6 a 8 signes
   Sous 560 px la colonne ne tient plus qu'une dizaine de signes, le paragraphe
   passe du simple au triple en nombre de lignes, et six mots sont coupes par la
   cesure a 375 px (blo-quee, rete-nu, ceremo-nie, engage-ment, pri-vee,
   telechar-ger) : la colonne est trop etroite pour son contenu. En dessous de
   429 px elle ne tient meme plus le mot le plus long du bloc, « engagement. »
   (72,4 px au plancher de 11 px), qu'elle est donc forcee de casser.
   Deux colonnes - jamais une - rendent 145,6 px de texte a 375 px, soit 24
   signes par ligne et 5 lignes : exactement le regime que la rangee de quatre a
   768 px. L'ordre des quatre etapes est conserve (01 02 / 03 04) et les filets
   de separation restent ceux de la grille. */
@media (max-width:560px){
  .etapes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:430px){
  .entete__barre{gap:.9rem}
  .marque img{height:1.73rem}
}

/* Sous 340 px seulement. Une vignette carree du journal tombe a 65,6 px de
   large ; son intitule y tient sur trois lignes et le contenu demande 66,6 px
   de haut, soit 1 px de plus que le carre. Le cadre sortait de son rapport 1:1
   (0,958 mesure). Ramener la marge interieure de la reserve a son plancher rend
   les 2,8 px qui manquent. Sans effet a 340 px et au-dessus. */
@media (max-width:340px){
  .reserve{padding:3px;gap:3px}
}

@media print{
  .entete,.menu-mobile,.defiler,.heros__badge{display:none}
  body{background:#fff;color:#000}
}

/* Photos livrees le 08/09/2026 : la case reservee garde sa geometrie, l'image la remplit. */
.photo-remplie{border:0!important;background:none!important;padding:0!important;overflow:hidden}
.photo-remplie .photo-modele{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}