/* ==========================================================
   Barghach Pictures — mariages — Films & photographies de mariage
   Rouge, blanc, rose. Fraunces pour les titres, Manrope pour le texte.
   ========================================================== */

/* Polices servies par le site lui-même (plus rapide, et aucun appel à Google : rien à déclarer côté RGPD).
   Fraunces et Manrope : fichiers officiels Google Fonts, alphabets latins uniquement. */
@font-face { font-family: "AGaramond"; src: url("../assets/fonts/AGaramondPro-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "AGaramond"; src: url("../assets/fonts/AGaramondPro-Italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
/* Fraunces italic latin-ext */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url(../assets/fonts/web/fraunces-italic-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Fraunces italic latin */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url(../assets/fonts/web/fraunces-italic-latin.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; }
/* Fraunces normal latin-ext */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../assets/fonts/web/fraunces-normal-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Fraunces normal latin */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../assets/fonts/web/fraunces-normal-latin.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; }
/* Manrope normal latin-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/web/manrope-normal-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Manrope normal latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(../assets/fonts/web/manrope-normal-latin.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; }
/* Manrope normal latin-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/web/manrope-normal-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Manrope normal latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(../assets/fonts/web/manrope-normal-latin.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; }
/* Manrope normal latin-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/web/manrope-normal-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Manrope normal latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(../assets/fonts/web/manrope-normal-latin.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; }
/* Manrope normal latin-ext */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/web/manrope-normal-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Manrope normal latin */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(../assets/fonts/web/manrope-normal-latin.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; }

:root {
    --rouge: #d7193a;
    --rouge-vif: #ef2b4b;
    --rouge-profond: #8f0d26;
    --vin: #3b0a16;
    --rose: #ff8fab;
    --rose-doux: #ffc2d1;
    --rose-pale: #fff0f3;
    --blanc: #ffffff;
    --texte: #3b0a16;
    --texte-doux: #7d4a56;
    --serif: "Fraunces", Georgia, serif;
    --sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
    --marge: clamp(16px, 5vw, 80px);
    --rayon: 28px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--blanc); color: var(--texte); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
main { overflow-x: clip; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.02; margin: 0; letter-spacing: -0.02em; font-variation-settings: "opsz" 144; }
h1 em, h2 em, h3 em, .marque em, .pied em { font-style: italic; color: var(--rouge); font-weight: 300; }
h1 { font-size: clamp(46px, 7.6vw, 120px); }
h2 { font-size: clamp(36px, 5vw, 72px); }
h3 { font-size: clamp(24px, 2.2vw, 32px); }

.etiquette { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rouge); margin: 0 0 18px; }
.chapeau { font-size: clamp(18px, 1.5vw, 21px); color: var(--texte-doux); max-width: 46ch; margin: 28px 0 0; }
.centre { text-align: center; margin-top: 50px; }

/* --- Boutons --- */
.bouton { display: inline-flex; align-items: center; gap: 8px; padding: 16px 30px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
.bouton-rouge { background: var(--rouge); color: var(--blanc); box-shadow: 0 10px 30px -10px rgba(215,25,58,.7); }
.bouton-rouge:hover { background: var(--rouge-profond); }
.bouton-blanc { background: var(--blanc); color: var(--rouge); }
.bouton-blanc:hover { background: var(--rose-pale); }
.bouton-contour { border-color: var(--rouge); color: var(--rouge); background: transparent; }
.bouton-contour:hover { background: var(--rouge); color: var(--blanc); }
.lien-fleche { font-weight: 700; color: var(--rouge); text-decoration: none; background: none; border: 0; cursor: pointer; padding: 0; border-bottom: 2px solid var(--rose-doux); transition: border-color .25s; }
.lien-fleche:hover { border-color: var(--rouge); }

/* ==========================================================
   En-tête
   ========================================================== */
/* En-tête calé à l'œil sur la page Mariages de barghachpictures.com.
   Son code : bloc de 1280 px centré, marge 32 px, hauteur 104 px, logo de 78 px de haut.
   Son Chrome affiche barghachpictures.com à 110 % et ce site à 90 % : on multiplie
   donc ces mesures par 110/90 (1,222) pour obtenir le même rendu à l'écran. */
.entete { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 127px; padding: 0 max(39px, calc(50% - 782px + 39px)); border-bottom: 1px solid #e6e6e6; background: #ffffff; }
.marque { justify-self: start; position: relative; display: block; width: 126px; height: 95px; }
.marque img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .3s; }
.logo-clair { opacity: 0; filter: drop-shadow(0 1px 8px rgba(0,0,0,.45)); }
/* Disparaît en descendant, revient en remontant (classe posée par js/main.js) */
.entete { transition: transform .35s ease, background-color .45s, border-color .45s; }
.entete.cache { transform: translateY(-100%); }

/* Droite : le bouton de réservation */
.entete-actions { justify-self: end; display: flex; align-items: center; gap: 20px; }
/* Icône Instagram à gauche du bouton : noire sur fond blanc, blanche sur la photo */
.entete-insta { display: grid; place-items: center; width: 44px; height: 44px; line-height: 0; }
.entete-insta svg { width: 22px; height: 22px; fill: var(--texte); transition: fill .25s; }
.entete-insta:hover svg { fill: var(--rouge); }
.entete-sur-image .entete:not(.defile) .entete-insta svg { fill: #ffffff; filter: drop-shadow(0 1px 6px rgba(0,0,0,.5)); }
.entete-cta { text-decoration: none; font-weight: 600; font-size: 15px; padding: 13px 24px !important; white-space: nowrap; }
.nav-cta-menu { display: none; }
/* Lien de langue FR / EN : discret, à côté d'Instagram (PC) et dans le menu plein écran (téléphone) */
.entete-langue { display: grid; place-items: center; min-width: 44px; height: 44px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-decoration: none; color: var(--texte); transition: color .25s; }
.entete-langue:hover { color: var(--rouge); }
.entete-sur-image .entete:not(.defile) .entete-langue { color: #ffffff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.nav .nav-langue { display: none; }
.nav { display: flex; align-items: center; gap: 40px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 16px; position: relative; }
.nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: var(--rouge); transform: scaleX(0); transition: transform .25s; }
.nav a:hover::after, .nav a.actif::after { transform: scaleX(1); }
.nav a.actif { color: var(--rouge); }
.nav-cta { background: var(--rouge); color: var(--blanc); padding: 11px 20px; border-radius: 999px; }
.nav-cta:hover { background: var(--rouge-profond); }
/* Bouton menu : les trois traits du site principal */
.burger { display: none; justify-self: end; flex-direction: column; justify-content: space-between; width: 48px; height: 48px; padding: 15px 8px; border: 0; background: transparent; cursor: pointer; }
.burger span { display: block; width: 100%; height: 2px; background: #111111; transition: transform .3s, opacity .3s; }
.burger span:nth-child(2) { width: 62%; margin-left: auto; }

/* ==========================================================
   Accueil — ouverture
   ========================================================== */
.une { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; padding: clamp(12px, 1.5vw, 24px) var(--marge) clamp(34px, 3vw, 50px); position: relative; }
.une h1 { font-size: clamp(44px, 5.6vw, 96px); }
.une::before { content: ""; position: absolute; right: -10vw; top: -8vw; width: 55vw; height: 55vw; border-radius: 50%; background: radial-gradient(circle, var(--rose-pale) 0%, var(--rose-pale) 55%, transparent 70%); z-index: -1; }
.une-chapeau { font-size: clamp(17px, 1.3vw, 20px); color: var(--texte-doux); max-width: 44ch; margin: 22px 0 30px; }
.une-boutons { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.une-visuel { position: relative; width: min(100%, calc((100svh - 320px) * .8)); justify-self: end; }
.arche { aspect-ratio: 4 / 5; width: 100%; margin-left: auto; border-radius: 999px 999px var(--rayon) var(--rayon); overflow: hidden; background: var(--rose-doux); box-shadow: 0 40px 80px -40px rgba(143,13,38,.6); }
.arche video { width: 100%; height: 100%; object-fit: cover; }
.pastille { position: absolute; left: -46px; top: 18%; width: 132px; height: 132px; border-radius: 50%; background: var(--rouge); color: var(--blanc); display: grid; place-items: center; box-shadow: 0 16px 40px -14px rgba(143,13,38,.8); }
.pastille svg { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); animation: tourne 18s linear infinite; }
.pastille text { fill: var(--blanc); font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 2.2px; }
.pastille span { font-size: 22px; }
@keyframes tourne { to { transform: rotate(360deg); } }
.une-vignette { position: absolute; right: -18px; bottom: -22px; width: 38%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 8px solid var(--blanc); box-shadow: 0 20px 50px -20px rgba(59,10,22,.5); }
.une-vignette img { width: 100%; height: 100%; object-fit: cover; }

/* --- Bloc « histoire » sous la photo du haut : mise en page reprise de la section
   « Votre histoire, simple et brute » de tadweddingphotographer.com (mesurée à l'écran :
   photo verticale de 9,5 % à 49,7 % de la largeur, texte de 53,7 % à 87,1 %,
   grands mots très pâles en fond derrière le texte). --- */
.histoire-bloc { display: grid; grid-template-columns: 40.2vw 33.4vw; column-gap: 4vw; padding: clamp(70px, 7vw, 130px) 0 clamp(70px, 7vw, 130px) 9.5vw; align-items: center; overflow: hidden; }
.histoire-bloc-photo { height: min(56vw, 1000px); overflow: hidden; }
.histoire-bloc-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 55% center; }
.histoire-bloc-texte { position: relative; padding: 4vw 0; }
.histoire-bloc-texte > *:not(.filigrane) { position: relative; z-index: 1; }
.filigrane { position: absolute; left: -2vw; margin: 0; font-family: var(--serif); font-size: clamp(80px, 8.4vw, 170px); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; color: var(--rose-pale); white-space: nowrap; pointer-events: none; z-index: 0; }
.filigrane-haut { top: -1vw; }
.filigrane-bas { bottom: -1vw; }
.histoire-bloc h2 { font-size: clamp(30px, 2.15vw, 46px); line-height: 1.12; text-transform: uppercase; letter-spacing: 0; margin-bottom: 22px; }
.histoire-bloc-sous { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.2vw, 23px); line-height: 1.35; color: var(--rouge); margin: 0 0 24px; }
.histoire-bloc-texte p:not(.filigrane):not(.histoire-bloc-sous) { font-size: clamp(14px, 0.85vw, 16px); line-height: 1.75; color: var(--texte-doux); margin: 0 0 16px; }
.bouton-carre { display: inline-block; margin-top: 26px; padding: 16px 30px; border: 1.5px solid var(--rouge); color: var(--rouge); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: background .25s, color .25s; }
.bouton-carre:hover { background: var(--rouge); color: var(--blanc); }
@media (max-width: 960px) {
    .histoire-bloc { grid-template-columns: 1fr; padding: 60px 16px; row-gap: 40px; }
    .histoire-bloc-photo { height: 110vw; }
}

/* --- Bloc « regard sincère » : mise en page reprise de la section « Un mariage sincère »
   de tadweddingphotographer.com (mesurée à l'écran : fond pâle, grands mots en filigrane
   en haut, titre de 9,5 % à 56,5 % qui chevauche la photo, photo de 50,4 % jusqu'au bord
   droit, texte de 12,9 % à 46,3 %, bouton carré centré sous le texte).
   À sa demande : texte décalé à gauche (9,5 % à 42,9 %, aligné sur le titre) et photo
   ramenée à gauche (47 % à 90,5 %) pour qu'elle ne colle plus au bord droit de l'écran. --- */
.sincere { position: relative; background: var(--rose-pale); padding: clamp(60px, 5vw, 100px) 0 clamp(70px, 6vw, 120px); display: grid; grid-template-columns: 9.5vw 0 33.4vw 4.1vw 43.5vw 9.5vw; grid-template-rows: auto auto 1fr; overflow: hidden; }
/* Grand texte en fond qui défile lentement vers la gauche, comme sur le site de référence
   (mesuré : environ 60 px par seconde sur un écran de 1728 px ; la vitesse est réglée par js/main.js).
   Comme chez eux, la bande commence à 2,6 % de la largeur sous le haut du bloc, interligne 1,4. */
.sincere-filigrane { position: absolute; top: 2.6vw; left: 0; right: 0; overflow: hidden; font-family: var(--serif); font-size: clamp(90px, 7.7vw, 170px); line-height: 1.4; text-transform: uppercase; color: var(--blanc); white-space: nowrap; pointer-events: none; }
.filigrane-piste { display: flex; width: max-content; animation: filigrane-defile var(--duree-defile, 60s) linear infinite; }
.filigrane-piste span { padding-right: 0.55em; }
.filigrane-piste span::after { content: "—"; padding-left: 0.55em; }
@keyframes filigrane-defile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .filigrane-piste { animation: none; } }
.sincere-titre { grid-column: 2 / 6; grid-row: 1; position: relative; z-index: 2; padding-top: 2.4vw; justify-self: start; }
.sincere-titre h2 { font-size: clamp(48px, 4.57vw, 92px); text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; }
.sincere-titre-2 { margin: 6px 0 0; font-family: var(--sans); font-weight: 700; font-size: clamp(24px, 2.5vw, 50px); line-height: 1.05; text-transform: uppercase; color: var(--rouge); }
.sincere-photo { grid-column: 5; grid-row: 1 / 4; align-self: start; margin-top: 4.6vw; height: 33.9vw; overflow: hidden; }
.sincere-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 70%; }
.sincere-texte { grid-column: 3; grid-row: 2 / 4; align-self: center; text-align: center; padding-top: 3vw; }
.sincere-texte p { font-size: clamp(14px, 0.85vw, 16px); line-height: 1.75; color: var(--texte-doux); text-align: justify; margin: 0; }
.sincere-texte h3 { font-size: clamp(26px, 1.9vw, 38px); margin: 34px 0 30px; }
.sincere-texte .bouton-carre { margin-top: 54px; }
@media (max-width: 960px) {
    .sincere { grid-template-columns: 1fr; padding: 60px 16px; row-gap: 30px; }
    .sincere-titre, .sincere-photo, .sincere-texte { grid-column: 1; grid-row: auto; margin: 0; }
    .sincere-photo { height: 66vw; }
}

/* --- Bande « Explorer / Informations / Contact » : reprise de tadweddingphotographer.com
   (mesurée : bande pleine largeur haute de 10,4 % de l'écran, trois colonnes centrées
   à 19 %, 50 % et 81 %, titre serif souligné, petite ligne en capitales dessous).
   Fond rouge profond au lieu de leur noir, pour rester dans les couleurs du site. --- */
.liens-bande { display: grid; grid-template-columns: 9.5vw 1fr 7.4vw 1fr 7.4vw 1fr 9.5vw; align-items: center; min-height: 10.4vw; background: var(--rouge-profond); }
.liens-bande a { text-align: center; text-decoration: none; color: #f6e4e9; padding: 28px 0; }
.liens-bande a:nth-child(1) { grid-column: 2; } .liens-bande a:nth-child(2) { grid-column: 4; } .liens-bande a:nth-child(3) { grid-column: 6; }
.liens-titre { display: inline-block; font-family: var(--serif); font-size: clamp(26px, 1.9vw, 38px); text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; line-height: 1.2; }
.liens-sous { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rose-doux); }
.liens-bande a:hover .liens-titre { color: var(--blanc); }

/* --- Bloc « bio » : reprise de la section « À vos côtés pour écrire votre récit »
   (mesurée : photo collée au bord gauche jusqu'à 49,7 %, texte de 53,7 % à 87,1 %,
   titre centré sur deux lignes, deux phrases en italique à puces, bouton carré centré). --- */
.bio { display: grid; grid-template-columns: 49.7vw 4vw 33.4vw 12.9vw; align-items: center; }
/* Cadre raccourci de 15 % par le haut : l'image garde sa taille et son cadrage,
   seule la bande du haut (mur et plafond) est coupée */
.bio-photo { grid-column: 1; height: min(47.6vw, 850px); overflow: hidden; }
.bio-photo img { width: 100%; height: min(56vw, 1000px); object-fit: cover; object-position: 52% center; position: relative; top: calc(min(47.6vw, 850px) - min(56vw, 1000px)); }
.bio-texte { grid-column: 3; padding: 70px 0; }
.bio-titre { text-align: center; margin-bottom: 70px; }
.bio-titre h2 { font-size: clamp(34px, 2.6vw, 56px); text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; white-space: nowrap; }
.bio-titre-2 { margin: 8px 0 0; font-weight: 700; font-size: clamp(20px, 1.85vw, 38px); line-height: 1.05; text-transform: uppercase; color: var(--rouge); }
.bio-texte > p { font-size: clamp(14px, 0.85vw, 16px); line-height: 1.75; color: var(--texte-doux); margin: 0 0 16px; }
.bio-puces { margin: 22px 0 26px; padding-left: 1.4em; }
.bio-puces li { font-family: var(--serif); font-style: italic; font-size: clamp(18px, 1.1vw, 22px); line-height: 1.5; color: var(--texte); }
.bio-puces li::marker { color: var(--rouge); }
.bio-texte .bouton-carre { display: table; margin: 50px auto 0; }
@media (max-width: 960px) {
    .liens-bande { grid-template-columns: 1fr; padding: 20px 0; }
    .liens-bande a:nth-child(n) { grid-column: 1; }
    .bio { grid-template-columns: 1fr; }
    .bio-photo, .bio-texte { grid-column: 1; }
    .bio-photo { height: 90vw; }
    .bio-photo img { height: 100%; top: 0; }
    .bio-texte { padding: 50px 16px; }
}

/* --- Bloc 2 : mise en page reprise de la section « Ma philosophie » de tadweddingphotographer.com
   (mesurée à l'écran : texte de 16 % à 46 % de la largeur, image de 54 % à 84 %,
   paragraphe plus étroit que le titre, aligné sur lui à gauche à sa demande). Ordinateur seulement. --- */
@media (min-width: 961px) {
    .une { grid-template-columns: 1fr 1fr; gap: 8vw; padding: clamp(80px, 8vw, 150px) 16vw; align-items: center; }
    .une::before { right: 4vw; top: 50%; transform: translateY(-50%); width: 46vw; height: 46vw; }
    .une h1 { font-size: clamp(46px, 4.2vw, 84px); }
    .une-texte .etiquette { margin-bottom: 22px; }
    .une-chapeau { max-width: 26vw; font-size: clamp(16px, 1.1vw, 20px); margin-top: 34px; }
    .une-visuel { width: 100%; justify-self: stretch; }
}

/* --- Bloc photo tout en haut de l'accueil : la photo en entier, pleine largeur, sans voile --- */
/* La photo passe sous l'en-tête (transparent en haut de page), comme sur la page Mariages :
   on ajoute la hauteur de l'en-tête au bloc et au haut du texte pour que le titre reste centré. */
.bloc-photo-haut { position: relative; width: 100%; height: calc(clamp(520px, 84vh, 820px) + 127px); overflow: hidden; background: #ffffff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(127px + 90px) 24px 90px; }
.bloc-photo-haut img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 46%; }
/* Voile, titre et sous-titre repris de la page Mariages de barghachpictures.com
   (.ed-hero-video-overlay, .ed-hero-title, .ed-hero-sub). Tailles × 110/90 comme l'en-tête,
   pour compenser la différence de zoom de son Chrome entre les deux sites. */
/* Léger voile en dégradé demandé par lui (28/10), raccourci à sa demande : il s'arrête sous l'en-tête (127 px) */
.bloc-photo-voile { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.38) 0, rgba(0, 0, 0, 0) 160px); }
/* Titre principal de la page (h1) : « Mariages » + sous-titre, sans rien changer à leur rendu */
.bloc-photo-h1 { position: relative; z-index: 1; margin: 0; font: inherit; letter-spacing: normal; line-height: normal; font-variation-settings: normal; }
.bloc-photo-h1 > span { display: block; }
.bloc-photo-titre, .bloc-photo-sous { position: relative; z-index: 1; margin: 0; font-family: "AGaramond", Garamond, Georgia, serif; font-weight: normal; }
.bloc-photo-titre { font-size: clamp(3.4rem, 9.8vw, 7.94rem); letter-spacing: 0.04em; line-height: 1.05; color: #f4f1fb; text-shadow: 0 2px 34px rgba(0, 0, 0, 0.55); }
.bloc-photo-sous { margin-top: 22px; font-size: clamp(1.22rem, 2.7vw, 1.83rem); font-style: italic; letter-spacing: 0.03em; line-height: 1.5; color: rgba(244, 241, 251, 0.92); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5); }

/* --- Bande défilante --- */
.bande { background: var(--rouge); color: var(--blanc); overflow: hidden; padding: 16px 0; transform: rotate(-1.5deg); margin: 10px -20px 20px; }
.bande-piste { display: flex; gap: 36px; width: max-content; animation: defile 28s linear infinite; font-family: var(--serif); font-size: clamp(26px, 3vw, 42px); font-style: italic; white-space: nowrap; }
.bande-piste i { font-style: normal; color: var(--rose-doux); }
@keyframes defile { to { transform: translateX(-50%); } }

/* ==========================================================
   Sections communes
   ========================================================== */
.section { padding: clamp(80px, 10vw, 140px) var(--marge); }
.section-rose { background: var(--rose-pale); padding: clamp(80px, 10vw, 140px) var(--marge); }
.section-rouge { background: var(--rouge); color: var(--blanc); padding: clamp(70px, 9vw, 120px) var(--marge); }
.titre-bloc { text-align: center; max-width: 900px; margin: 0 auto clamp(46px, 6vw, 80px); }
.titre-ligne { display: flex; align-items: end; justify-content: space-between; text-align: left; max-width: none; gap: 24px; flex-wrap: wrap; }

/* --- Services --- */
.services-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: 1340px; margin: 0 auto; }
.service { position: relative; display: flex; flex-direction: column; padding: 18px 18px 34px; border-radius: var(--rayon); background: var(--blanc); border: 2px solid var(--rose-pale); text-decoration: none; transition: box-shadow .3s, border-color .3s; }
.service:hover { box-shadow: 0 30px 60px -30px rgba(143,13,38,.45); border-color: var(--rose-doux); }
.service-rose { background: var(--rose-pale); border-color: var(--rose-pale); }
.service-rouge { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.service-rouge .lien-fleche { color: var(--blanc); border-color: rgba(255,255,255,.4); }
.service-rouge .service-num { background: var(--blanc); color: var(--rouge); }
.service-image { aspect-ratio: 4 / 3.4; border-radius: calc(var(--rayon) - 8px); overflow: hidden; margin-bottom: 26px; }
.service-image img { width: 100%; height: 100%; object-fit: cover; }
.service-num { position: absolute; top: 32px; left: 32px; background: var(--rouge); color: var(--blanc); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px; }
.service h3, .service p, .service .lien-fleche { margin-left: 14px; margin-right: 14px; }
.service p { margin-top: 12px; margin-bottom: 22px; flex: 1; }
.service .lien-fleche { align-self: flex-start; }

/* --- Citation --- */
.citation { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.citation-photo { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 5; max-height: 700px; }
.citation-photo img { width: 100%; height: 100%; object-fit: cover; }
.guillemet { font-family: var(--serif); font-size: 160px; line-height: .6; color: var(--rouge); display: block; height: 70px; }
.citation blockquote { font-family: var(--serif); font-size: clamp(28px, 3.4vw, 48px); line-height: 1.2; margin: 0 0 28px; letter-spacing: -0.01em; }
.citation-auteur { font-weight: 700; color: var(--rouge); margin: 0 0 24px; }
.citation-seule { grid-template-columns: 1fr; text-align: center; }
.citation-seule .citation-texte { max-width: 900px; margin: 0 auto; }

/* --- Cartes histoires (accueil) --- */
.cartes-histoires { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.carte-histoire { text-decoration: none; display: block; }
.carte-histoire img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon); margin-bottom: 18px; transition: box-shadow .3s; }
.carte-histoire:hover img { box-shadow: 0 30px 60px -30px rgba(143,13,38,.6); }
.carte-decalee { margin-top: 70px; }
.carte-lieu { font-size: 13px; font-weight: 700; color: var(--rouge); text-transform: uppercase; letter-spacing: .14em; }
.carte-histoire h3 { margin-top: 6px; font-size: clamp(28px, 2.6vw, 38px); }

/* Accueil : les deux vraies histoires, côte à côte, à la même hauteur */
.cartes-reelles { grid-template-columns: 1.5fr 1fr; }
.cartes-reelles .carte-histoire img { aspect-ratio: auto; height: clamp(420px, 36vw, 720px); }

/* --- Bloc « L'heure est venue de briller » : reprise du bloc « Prêts à raconter votre histoire ? »
   de tadweddingphotographer.com (mesuré : photo pleine largeur haute de 45 % de l'écran, texte
   blanc à droite de 57 % à 90,5 %, très grand mot puis sous-titre, phrase en italique,
   paragraphes de 65 % à 90,5 %, bouton carré blanc). Pas de voile : le texte tient par son ombre. --- */
.pret { position: relative; height: 45vw; min-height: 560px; overflow: hidden; color: var(--blanc); }
.pret-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
/* Le titre reste en haut à droite, à l'endroit où il était avec les paragraphes (6,2 % de la largeur sous le haut du bloc) */
/* Léger voile demandé par lui (28/10) : sombre au bord droit, disparu à la moitié de la photo */
.pret-voile { position: absolute; inset: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.16) 28%, rgba(0, 0, 0, 0) 50%); }
.pret-texte { position: absolute; top: 0; bottom: 0; left: 57.1vw; right: 9.5vw; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 6.2vw; text-shadow: 0 2px 22px rgba(0,0,0,.45); }
.pret h2 { text-align: center; margin: 0; }
.pret-grand { display: block; font-size: clamp(64px, 7vw, 150px); text-transform: uppercase; line-height: .95; letter-spacing: -0.01em; white-space: nowrap; }
.pret-sous { display: block; margin-top: 10px; font-size: clamp(22px, 2.3vw, 46px); text-transform: uppercase; line-height: 1.1; }
.pret h2 em, .pret h3 em { color: var(--blanc); }
.pret h3 { margin: clamp(40px, 4.6vw, 90px) 0 22px 3.4vw; font-size: clamp(24px, 1.9vw, 38px); text-transform: uppercase; text-align: right; }
.pret h3 em { text-transform: none; }
.pret-texte p { margin: 0 0 14px 8.1vw; font-size: clamp(14px, 0.9vw, 17px); line-height: 1.7; text-align: justify; }
.bouton-carre-blanc { align-self: center; margin: 34px 0 0 8.1vw; border-color: var(--blanc); color: var(--blanc); text-shadow: none; box-shadow: 0 2px 18px rgba(0,0,0,.18); }
.bouton-carre-blanc:hover { background: var(--blanc); color: var(--rouge); }

/* --- Rangée de photos carrées avant le pied de page (comme sur le site de référence :
   six carrés sur toute la largeur, petit espace entre chacun) --- */
.carres { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.8vw; padding: 2.4vw 0 0; background: var(--blanc); }
.carre { display: block; aspect-ratio: 1; overflow: hidden; position: relative; }
.carre img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 960px) {
    .pret { height: auto; min-height: 0; }
    .pret-image { position: relative; height: 70vw; }
    .pret-texte { position: static; padding: 40px 16px; background: var(--rouge-profond); text-shadow: none; }
    .pret h3, .pret-texte p, .bouton-carre-blanc { margin-left: 0; text-align: left; }
    .carres { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================
   Page À propos : structure reprise à l'identique de la page « About »
   de tadweddingphotographer.com (mesures relevées sur un écran de 1728 px,
   converties en % de la largeur). Toutes les images = la photo de Mourad.
   ========================================================== */
/* 1. Ouverture : photo pleine largeur, nom en bas à gauche, « À propos » qui défile */
/* Hauteur réduite à sa demande (62 → 48 % de la largeur) ; textes calés depuis le bas pour garder le même rendu */
.ap-une { position: relative; height: 48vw; overflow: hidden; color: var(--blanc); }
.ap-une-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* Léger voile demandé par lui sur cette photo (exception à la règle « pas de voile ») */
.ap-une-voile { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); }
.ap-une-texte { position: absolute; left: 9.5vw; bottom: 14vw; text-shadow: 0 2px 22px rgba(0,0,0,.5); }
.ap-une h1 { font-size: 4.3vw; text-transform: uppercase; letter-spacing: 0; }
.ap-une-sous { margin: 0.4vw 0 0 3.4vw; font-family: var(--serif); font-size: 1.9vw; text-transform: uppercase; line-height: 1.1; }
.ap-defile { position: absolute; left: 9.5vw; right: 9.5vw; bottom: 4.7vw; overflow: hidden; font-size: 1.4vw; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.ap-defile span { padding-right: 1.6em; }
.ap-defile .filigrane-piste span::after { content: none; }

/* 2. Présentation : texte à gauche (16,3 % → 46,2 %), photo à droite (60,5 % → 90,5 %) */
.ap-intro { position: relative; display: grid; grid-template-columns: 16.3vw 29.9vw 14.3vw 30vw 9.5vw; background: var(--rose-pale); padding: 3.3vw 0 4.5vw; overflow: hidden; }
.ap-intro-texte { grid-column: 2; position: relative; padding-top: 7.2vw; }
.ap-intro-texte > *:not(.ap-filigrane) { position: relative; z-index: 1; }
.ap-intro-texte .ap-filigrane { position: absolute; left: -2vw; top: 3vw; margin: 0; font-family: var(--serif); font-size: 6.4vw; line-height: 1; text-transform: uppercase; color: var(--blanc); text-align: left; }
.ap-intro h2, .ap-pourquoi h2, .ap-approche h2, .ap-faq h2 { text-transform: uppercase; line-height: 1; letter-spacing: 0; }
.ap-intro h2 span, .ap-pourquoi h2 span, .ap-approche h2 span, .ap-faq h2 span { display: block; }
.ap-intro .l1 { font-size: 4vw; } .ap-intro .l2 { font-size: 2.5vw; } .ap-intro .l3 { font-size: 2.26vw; }
.ap-intro h3 { margin: 12vw 3.4vw 1.6vw 0; font-size: 2.14vw; text-align: center; line-height: 1.15; }
.ap-intro h3 em, .ap-faits h3 em, .ap-rencontre h3 em, .ap-intro h4 em { color: inherit; }
.ap-intro-texte p, .ap-pourquoi p, .ap-approche p, .ap-rencontre p { font-size: clamp(14px, 0.9vw, 17px); line-height: 1.7; color: var(--texte-doux); text-align: justify; margin: 0 0 14px; }
.ap-intro-texte p { margin-right: 3.4vw; }
.ap-intro h4 { margin: 2.6vw 3.4vw 0 0; font-family: var(--serif); font-size: 1.1vw; }
.ap-intro-photo { grid-column: 4; height: 44.6vw; overflow: hidden; }
.ap-intro-photo img, .ap-passion img, .ap-faq-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; }

/* 3. Bande de chiffres : 4 colonnes sur toute la largeur */
.ap-chiffres { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 1.2vw; background: var(--blanc); padding: 3vw 0; text-align: center; }
.ap-chiffres h3 { font-size: 1.74vw; text-transform: uppercase; }
.ap-chiffres strong { display: block; font-size: 2.3vw; font-weight: 800; color: var(--rouge); line-height: 1.1; }
.ap-chiffres p { margin: 6px 0 0; font-size: 0.8vw; text-transform: uppercase; letter-spacing: .04em; color: var(--texte-doux); }

/* 4. Passion & approche : grande photo à gauche avec les « faits » par-dessus, deux textes et une petite photo à droite */
.ap-passion { position: relative; height: 85vw; background: var(--rose-pale); }
.ap-passion > * { position: absolute; }
.ap-passion-grande { left: 9.5vw; top: 4.8vw; width: 40.2vw; height: 61.2vw; overflow: hidden; }
.ap-faits { position: absolute; left: 3.4vw; right: 3.4vw; top: 40.4vw; color: var(--blanc); text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.ap-faits h3 { font-size: 2.3vw; text-align: center; margin-bottom: 1.4vw; }
.ap-faits ol { margin: 0; padding-left: 4.6vw; font-size: clamp(13px, 0.85vw, 16px); line-height: 1.6; }
.ap-faits li { margin-bottom: 0.8vw; }
.ap-pourquoi { left: 57.1vw; top: 10.3vw; width: 26.6vw; }
.ap-pourquoi .l1 { font-size: 4.45vw; } .ap-pourquoi .l2 { font-size: 3vw; }
.ap-pourquoi h2 { margin-bottom: 2.2vw; }
.ap-approche { left: 63.9vw; top: 31.5vw; width: 26.6vw; }
.ap-approche .l1 { font-size: 3.36vw; } .ap-approche .l2 { font-size: 2.2vw; }
.ap-approche h2 { margin-bottom: 1.8vw; }
.ap-passion-petite { left: 60.5vw; top: 52.7vw; width: 39.5vw; height: 30.3vw; overflow: hidden; }

/* 5. « Prêts à me rencontrer ? » : photo pleine largeur, texte en haut à droite */
.ap-rencontre { position: relative; height: 44.6vw; overflow: hidden; }
.ap-rencontre-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.ap-rencontre-texte { position: absolute; left: 53.7vw; width: 26.6vw; top: 3vw; text-align: center; }
.ap-rencontre h3 { font-size: 2.66vw; margin-bottom: 1.6vw; }
.ap-rencontre p { color: var(--texte); }
.ap-rencontre .bouton-carre { margin-top: 1.2vw; background: rgba(255,255,255,.75); }

/* 6. FAQ : titre et questions à gauche, photo avec « F.A.Q » à droite */
.ap-faq { display: grid; grid-template-columns: 12.9vw 33.4vw 14.2vw 26.6vw 12.9vw; padding: 6.6vw 0 7vw; background: var(--rose-pale); }
.ap-faq-texte { grid-column: 2; }
.ap-faq .l1 { font-size: 6.3vw; } .ap-faq .l2 { font-size: 2.8vw; text-transform: none; margin-top: 0.3vw; }
.ap-faq .l2 em { color: var(--texte); }
.ap-faq-liste { margin-top: 2.4vw; }
.ap-faq-liste details { border-bottom: 1px solid var(--texte); }
.ap-faq-liste summary { list-style: none; cursor: pointer; position: relative; padding: 1.1vw 2.4vw 1.1vw 0; font-family: var(--serif); font-size: clamp(15px, 0.95vw, 18px); }
.ap-faq-liste summary::-webkit-details-marker { display: none; }
.ap-faq-liste summary::after { content: "+"; position: absolute; right: 0.4vw; top: 50%; transform: translateY(-50%); font-family: var(--sans); font-size: 20px; }
.ap-faq-liste details[open] summary::after { content: "–"; }
.ap-faq-liste p { margin: 0 0 1.2vw; font-size: clamp(14px, 0.9vw, 16px); color: var(--texte-doux); }
.ap-faq-photo { grid-column: 4; position: relative; height: 32.7vw; overflow: hidden; }
.ap-faq-mot { position: absolute; left: 0; right: 0; top: 1.4vw; margin: 0; text-align: center; font-family: var(--serif); font-size: 6.6vw; line-height: 1; color: var(--blanc); text-shadow: 0 2px 20px rgba(0,0,0,.45); }

/* Page À propos : les couleurs du site de référence (fonds gris très clair et blanc,
   grands titres gris, texte noir, boutons et filets noirs) au lieu du rouge et du rose */
.page-apropos .ap-intro, .page-apropos .ap-passion, .page-apropos .ap-faq { background: #f5f5f5; }
.page-apropos .ap-chiffres { background: #ffffff; }
.page-apropos .ap-intro h2, .page-apropos .ap-pourquoi h2, .page-apropos .ap-approche h2, .page-apropos .ap-faits h3 + *, .page-apropos .ap-faq h2 .l1 { color: #797979; }
.page-apropos .ap-faq h2 .l2, .page-apropos .ap-faq h2 .l2 em { color: #797979; }
.page-apropos .ap-intro h3, .page-apropos .ap-intro h4, .page-apropos .ap-rencontre h3, .page-apropos .ap-chiffres h3 { color: #000000; }
.page-apropos .ap-intro-texte p:not(.ap-filigrane), .page-apropos .ap-pourquoi p, .page-apropos .ap-approche p, .page-apropos .ap-rencontre p, .page-apropos .ap-chiffres p, .page-apropos .ap-faq-liste p, .page-apropos .ap-faq-liste summary { color: #000000; }
.page-apropos .ap-chiffres strong { color: #000000; }
.page-apropos .ap-faq-liste details { border-bottom-color: #000000; }
.page-apropos .bouton-carre { border-color: #000000; color: #000000; }
.page-apropos .bouton-carre:hover { background: #000000; color: #ffffff; }
.page-apropos .ap-faits ol { color: #ffffff; }

/* --- Chiffres --- */
.chiffres-rouges { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--rouge); color: var(--blanc); padding: 70px var(--marge); gap: 30px; }
.chiffres-rouges div { text-align: center; }
.chiffres-rouges strong { display: block; font-family: var(--serif); font-weight: 300; font-size: clamp(50px, 6vw, 88px); line-height: 1; }
.chiffres-rouges span { color: var(--rose-doux); font-weight: 600; }

/* --- Mosaïque (accueil) --- */
.mosaique { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: 280px 280px; gap: 16px; max-width: 1400px; margin: 0 auto; }
.mosaique img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rayon); }
.m1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.m2 { grid-column: 3 / 5; }
.m3 { grid-column: 5 / 7; grid-row: 1 / 3; }
.m4 { grid-column: 3 / 4; }
.m5 { grid-column: 4 / 5; }

/* ==========================================================
   En-tête des pages intérieures
   ========================================================== */
.entete-page { padding: clamp(70px, 10vw, 150px) var(--marge) clamp(60px, 8vw, 110px); position: relative; overflow: hidden; }
.entete-page::after { content: "✿"; position: absolute; right: var(--marge); bottom: -0.25em; font-size: clamp(200px, 30vw, 480px); line-height: 1; opacity: .9; }
.entete-rouge { background: var(--rouge); color: var(--blanc); }
.entete-rouge h1 em { color: var(--rose-doux); }
.entete-rouge .etiquette { color: var(--rose-doux); }
.entete-rouge .chapeau { color: #ffe1e8; }
.entete-rouge::after { color: var(--rouge-vif); }
.entete-rose { background: var(--rose-pale); }
.entete-rose::after { color: var(--rose-doux); }
.entete-page > * { position: relative; z-index: 1; }
/* En-tête de page sur photo (Gallery) : la photo passe sous le haut de page transparent, sans voile ;
   le texte blanc tient par son ombre */
.entete-photo { color: var(--blanc); padding-top: calc(127px + clamp(60px, 7vw, 130px)); text-shadow: 0 2px 22px rgba(0,0,0,.45); }
.entete-photo::after { content: none; }
.entete-photo > .entete-photo-image { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* Léger voile demandé par lui (28/10) : sombre au bord gauche, disparu à la moitié de la photo */
.entete-photo > .entete-photo-voile { position: absolute; inset: 0; z-index: 0; background: linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.16) 28%, rgba(0, 0, 0, 0) 50%); }
/* En-tête Offres (demandé le 28/10) : voile très léger du haut, limité à la bande du menu,
   + voile de gauche à droite qui s'arrête au milieu (comme Gallery) */
.entete-photo > .voile-offres { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0) 150px), linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.16) 28%, rgba(0, 0, 0, 0) 50%); }
.entete-photo .etiquette, .entete-photo h1 em { color: var(--blanc); }
.entete-photo .chapeau { color: var(--blanc); text-shadow: 0 1px 3px rgba(0,0,0,.45), 0 2px 24px rgba(0,0,0,.5); }

/* --- Gallery : raccourcis vers les films et les photos --- */
.gallery-onglets { display: flex; gap: 12px; margin-top: 36px; }
.gallery-onglets a { padding: 13px 28px; border: 1.5px solid var(--blanc); color: var(--blanc); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transition: background .25s, color .25s; }
.gallery-onglets a:hover { background: var(--blanc); color: var(--rouge); }
#films, #photos { scroll-margin-top: 140px; }

/* --- Films --- */
.showreel-cadre { max-width: 1300px; margin: 0 auto; border-radius: var(--rayon); overflow: hidden; background: var(--vin); aspect-ratio: 16 / 9; box-shadow: 0 40px 90px -40px rgba(143,13,38,.7); }
.showreel-cadre video { width: 100%; height: 100%; object-fit: cover; }
.showreel-legende { text-align: center; font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--texte-doux); margin: 22px 0 0; }
.showreel { padding-bottom: 0; }
.grille-films { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 26px; max-width: 1340px; margin: 0 auto; }
.carte-film { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.carte-film-image { position: relative; border-radius: var(--rayon); overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: 16px; }
.carte-film-image img { width: 100%; height: 100%; object-fit: cover; }
.lecture { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; background: var(--rouge); color: var(--blanc); display: grid; place-items: center; font-size: 22px; padding-left: 4px; box-shadow: 0 0 0 0 rgba(255,255,255,.6); transition: box-shadow .3s, background .3s; }
.carte-film:hover .lecture { box-shadow: 0 0 0 12px rgba(255,255,255,.45); background: var(--rouge-vif); }
.duree { position: absolute; left: 16px; bottom: 16px; background: var(--blanc); color: var(--rouge); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; }
.carte-film h3 { font-size: 28px; }
.carte-film p { margin: 4px 0 0; color: var(--texte-doux); }
.formats-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1340px; margin: 0 auto; }
.format { background: var(--blanc); border-radius: var(--rayon); padding: 34px 28px; }
.format-duree { display: inline-block; font-family: var(--serif); font-style: italic; font-size: 38px; color: var(--rouge); margin-bottom: 14px; }
.format p { color: var(--texte-doux); margin: 12px 0 0; }
.coulisses { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 6vw, 100px); align-items: center; }
.coulisses-photo { border-radius: 999px 999px var(--rayon) var(--rayon); overflow: hidden; aspect-ratio: 4 / 5; max-height: 720px; }
.coulisses-photo img { width: 100%; height: 100%; object-fit: cover; }
.coulisses-texte > p { color: var(--texte-doux); margin: 26px 0; }
.liste-coeurs { list-style: none; padding: 0; margin: 0; }
.liste-coeurs li { padding: 14px 0 14px 34px; border-top: 1px solid var(--rose-doux); position: relative; font-weight: 600; }
.liste-coeurs li::before { content: "♥"; position: absolute; left: 4px; color: var(--rouge); }

/* --- Photographie : filtres & galerie --- */
.filtres { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 46px; }
.filtre { background: var(--rose-pale); border: 0; border-radius: 999px; padding: 12px 24px; font-weight: 700; cursor: pointer; transition: background .25s, color .25s; }
.filtre:hover { background: var(--rose-doux); }
.filtre.actif { background: var(--rouge); color: var(--blanc); }
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 260px; grid-auto-flow: dense; gap: 14px; max-width: 1440px; margin: 0 auto; }
.case { border: 0; padding: 0; border-radius: 20px; overflow: hidden; cursor: zoom-in; background: var(--rose-pale); position: relative; }
.case img { width: 100%; height: 100%; object-fit: cover; }
/* Effet repris de la galerie de la page Mariages de barghachpictures.com (.wd-gallery-item) :
   la photo se soulève, son ombre se creuse, l'image zoome et un reflet de lumière la traverse */
.case, .carre { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s cubic-bezier(.2,.7,.2,1); }
.case:hover, .carre:hover { transform: translateY(-10px) scale(1.014); box-shadow: 0 34px 70px -18px rgba(0, 0, 0, 0.55); z-index: 2; }
.case img, .carre img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.case:hover img, .carre:hover img { transform: scale(1.05); }
.case::after, .carre::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.16) 50%, transparent 62%); transform: translateX(-110%); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.case:hover::after, .carre:hover::after { transform: translateX(110%); }
.case.large { grid-column: span 2; }
.case.haute { grid-row: span 2; }
.case.cache { display: none; }
.bandeau-texte { text-align: center; }
.bandeau-texte p { font-family: var(--serif); font-size: clamp(26px, 3vw, 42px); line-height: 1.25; max-width: 30ch; margin: 0 auto 34px; }
.bandeau-texte strong { font-weight: 400; font-style: italic; color: var(--rose-doux); }

/* --- Gallery : toutes les réalisations mélangées, le film en tête sur deux colonnes --- */
/* Largeur alignée sur l'en-tête : du bord gauche du logo au bord droit de « Réserver ma date »
   (même calcul que le padding de .entete : bloc de 1 564 px centré, 39 px de marge) */
.galerie-melangee { --largeur-entete: calc(min(100vw, 1564px) - 78px); width: var(--largeur-entete); max-width: none; margin-left: 50%; transform: translateX(-50%); gap: 12px; grid-template-columns: repeat(6, 1fr); grid-auto-rows: calc((var(--largeur-entete) - 60px) / 6); }
.galerie-melangee .case[style*="--c"] { grid-column: var(--c) / span var(--w); grid-row: var(--l) / span var(--h); }
.galerie-melangee .m-g { grid-column: span 2; grid-row: span 2; }
.galerie-melangee .m-l { grid-column: span 2; }
.galerie-melangee .m-h { grid-row: span 2; }
.tuile-film { grid-column: span 2; grid-row: span 2; position: relative; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: pointer; background: var(--vin); }
.tuile-film img { width: 100%; height: 100%; object-fit: cover; }
.tuile-film .lecture { width: 96px; height: 96px; margin: -48px 0 0 -48px; font-size: 28px; }
.tuile-film:hover .lecture { box-shadow: 0 0 0 14px rgba(255,255,255,.45); background: var(--rouge-vif); }

/* Gallery pleine largeur : 10 colonnes d'un bord à l'autre de l'écran, cases de ~181 px
   (pour revenir à la version 6 colonnes : retirer « galerie-pleine » et « section-pleine ») */
.section-pleine { padding-left: 12px; padding-right: 12px; }
.galerie-pleine { max-width: none; gap: 12px; grid-template-columns: repeat(10, 1fr); grid-auto-rows: calc((100vw - 24px - 108px) / 10); }

/* --- Histoires --- */
.liste-histoires { display: flex; flex-direction: column; gap: clamp(60px, 9vw, 130px); }
.histoire { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; text-decoration: none; }
.histoire-inverse .histoire-image { order: 2; }
.histoire-image { border-radius: var(--rayon); overflow: hidden; aspect-ratio: 5 / 4; }
.histoire-image img { width: 100%; height: 100%; object-fit: cover; }
.histoire-num { font-family: var(--serif); font-style: italic; font-size: 60px; color: var(--rose-doux); display: block; line-height: 1; margin-bottom: 18px; }
.histoire h2 { margin-bottom: 18px; }
.histoire-texte > p:not(.etiquette) { color: var(--texte-doux); font-size: 19px; margin: 0 0 24px; }

/* --- Page Histoires : en-tête compact + cartes sur la largeur de l'en-tête (logo → bouton) --- */
.entete-compacte { padding-top: clamp(50px, 6vw, 100px); padding-bottom: clamp(44px, 5vw, 80px); }
.entete-compacte::after { font-size: clamp(160px, 20vw, 320px); }
.h-liste { padding-top: clamp(60px, 6vw, 100px); }
.h-grille { --largeur-entete: calc(min(100vw, 1564px) - 78px); width: var(--largeur-entete); margin-left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2vw; align-items: start; }
.h-carte { display: block; text-decoration: none; color: var(--texte); }
.h-carte-image { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; box-shadow: 0 10px 26px rgba(0,0,0,.14); transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .6s cubic-bezier(.2,.7,.2,1); }
.h-carte-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.h-carte-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%); transform: translateX(-110%); transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.h-carte:hover .h-carte-image { transform: translateY(-10px) scale(1.014); box-shadow: 0 34px 70px -18px rgba(0,0,0,.55); }
.h-carte:hover .h-carte-image img { transform: scale(1.05); }
.h-carte:hover .h-carte-image::after { transform: translateX(110%); }
.h-carte-num { position: absolute; top: 16px; left: 16px; z-index: 1; background: var(--blanc); color: var(--rouge); font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px; }
.h-carte-lieu { margin: 22px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rouge); }
.h-carte h2 { font-size: clamp(30px, 2.3vw, 44px); }
.h-carte-texte { margin: 12px 0 18px; color: var(--texte-doux); font-size: 16px; line-height: 1.6; }
.h-carte-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--rose-doux); font-size: 13px; color: var(--texte-doux); }
.h-carte-suivante .h-carte-suivante-fond { aspect-ratio: 4 / 5; border-radius: 6px; background: var(--rouge); color: var(--blanc); display: flex; flex-direction: column; justify-content: center; padding: 3vw; box-shadow: 0 10px 26px rgba(0,0,0,.14); transition: background .3s, box-shadow .6s; }
.h-carte-suivante:hover .h-carte-suivante-fond { background: var(--rouge-profond); box-shadow: 0 34px 70px -18px rgba(143,13,38,.6); }
.h-carte-suivante .etiquette { color: var(--rose-doux); }
.h-carte-suivante h2 { color: var(--blanc); font-size: clamp(30px, 2.4vw, 46px); }
.h-carte-suivante h2 em { color: var(--rose-doux); }
.h-carte-suivante p:not(.etiquette) { margin: 18px 0 28px; color: #ffe1e8; line-height: 1.6; }
.h-carte-suivante .bouton-carre { align-self: flex-start; margin-left: 0; white-space: nowrap; }
/* Accueil : le titre « Ils ont dit oui » et son bouton alignés sur la rangée de cartes */
.histoires-accueil .titre-ligne { width: calc(min(100vw, 1564px) - 78px); margin-left: 50%; transform: translateX(-50%); }
@media (max-width: 960px) { .h-grille { width: auto; margin-left: 0; transform: none; grid-template-columns: 1fr; gap: 50px; } }

/* --- Accueil « Ils ont dit oui », version aérée (28/10) : une grande ligne par couple, côtés alternés --- */
.hr-liste { --largeur-entete: calc(min(100vw, 1564px) - 78px); width: var(--largeur-entete); margin-left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: clamp(110px, 10vw, 190px); padding-top: clamp(30px, 3vw, 60px); }
.hr-ligne { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(60px, 7vw, 140px); align-items: center; text-decoration: none; color: var(--texte); }
.hr-inverse { grid-template-columns: 1fr 1.35fr; }
.hr-inverse .hr-visuel { order: 2; }
.hr-visuel { position: relative; }
.hr-principale, .hr-seconde { overflow: hidden; border-radius: 6px; box-shadow: 0 18px 44px -12px rgba(0,0,0,.28); }
.hr-principale { aspect-ratio: 3 / 2; }
.hr-seconde { position: absolute; right: -5%; bottom: -16%; width: 30%; aspect-ratio: 4 / 5; border: 10px solid var(--blanc); border-radius: 8px; }
.hr-principale img, .hr-seconde img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.hr-ligne:hover .hr-principale img { transform: scale(1.04); }
/* Couple en portrait : photo principale verticale à droite, la petite photo déborde à gauche */
.hr-portrait .hr-principale { aspect-ratio: 4 / 5; width: 68%; margin-left: auto; }
.hr-portrait .hr-principale img { object-position: center 30%; }
.hr-portrait .hr-seconde { right: auto; left: 0; bottom: 10%; width: 38%; }
.hr-texte { max-width: 520px; }
.hr-num { margin: 0 0 6px; font-family: var(--serif); font-weight: 300; font-size: clamp(80px, 7vw, 130px); line-height: 1; color: var(--rose-doux); }
.hr-lieu { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--rouge); }
.hr-texte h3 { margin: 0; font-size: clamp(38px, 3.2vw, 60px); line-height: 1.05; }
.hr-desc { margin: 22px 0 14px; font-size: 17px; line-height: 1.75; color: var(--texte-doux); }
.hr-details { margin: 0 0 30px; font-size: 13px; letter-spacing: .06em; color: var(--texte-doux); }
.hr-suivante { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "num titre bouton" "num texte bouton"; column-gap: clamp(40px, 4vw, 80px); align-items: center; padding: clamp(50px, 4.5vw, 80px) clamp(40px, 5vw, 100px); background: var(--rouge); color: var(--blanc); border-radius: 6px; text-decoration: none; transition: background .3s; }
.hr-suivante:hover { background: var(--rouge-profond); }
.hr-suivante-num { grid-area: num; margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(70px, 6vw, 110px); line-height: 1; color: var(--rose-doux); }
.hr-suivante h3 { grid-area: titre; margin: 0; color: var(--blanc); font-size: clamp(32px, 2.6vw, 50px); }
.hr-suivante h3 em { color: var(--rose-doux); }
.hr-suivante-texte { grid-area: texte; margin: 12px 0 0; max-width: 560px; color: #ffe1e8; line-height: 1.6; }
.hr-suivante .bouton-carre { grid-area: bouton; margin: 0; white-space: nowrap; }

@media (max-width: 960px) {
    .hr-liste { width: auto; margin-left: 0; transform: none; gap: 80px; }
    .hr-ligne, .hr-inverse { grid-template-columns: 1fr; gap: 50px; }
    .hr-inverse .hr-visuel { order: 0; }
    .hr-suivante { grid-template-columns: 1fr; grid-template-areas: "num" "titre" "texte" "bouton"; row-gap: 14px; }
}

/* --- Histoire détail --- */
.une-histoire { position: relative; height: 88vh; min-height: 560px; }
.une-histoire-image { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* Pages des couples : espaces resserrés entre le texte, les photos et le bas de page (28/10) */
.fiche:has(+ .histoire-galerie) { padding-bottom: 45px; }
.histoire-galerie { padding-top: 45px; padding-bottom: 35px; }
.histoire-galerie + .suite { padding-top: 35px; padding-bottom: 70px; }
/* Voile très léger en haut, limité à la bande du menu, comme Offres et Histoires (28/10) */
.une-histoire-voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.22) 0, rgba(0, 0, 0, 0) 150px); }
.une-histoire-texte { position: absolute; left: var(--marge); bottom: 60px; background: var(--blanc); padding: 34px 44px; border-radius: var(--rayon); }
.une-histoire-texte p:last-child { margin: 10px 0 0; color: var(--texte-doux); }
.fiche { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(30px, 6vw, 100px); max-width: 1240px; margin: 0 auto; }
.fiche-infos { margin: 0; display: grid; gap: 0; align-content: start; }
.fiche-infos div { border-top: 2px solid var(--rose-pale); padding: 16px 0; }
.fiche-infos dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: var(--rouge); }
.fiche-infos dd { margin: 4px 0 0; font-family: var(--serif); font-size: 26px; }
.fiche-recit p { font-size: 20px; margin: 0 0 22px; }
.lettrine::first-letter { font-family: var(--serif); float: left; font-size: 96px; line-height: .8; color: var(--rouge); margin: 8px 12px 0 0; }
.galerie-histoire { grid-auto-rows: 300px; grid-template-columns: repeat(4, 1fr); }
.suite { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.entete-sur-image .entete { position: fixed; left: 0; right: 0; transition: transform .35s ease, background-color .45s, border-color .45s; }
.entete-sur-image .entete:not(.defile) { background: transparent; border-bottom-color: transparent; }
.entete-sur-image .entete:not(.defile) .nav a::after { background: var(--blanc); }
.entete-sur-image .entete:not(.defile) .burger span { background: #ffffff; }
.entete-sur-image .entete:not(.defile) .nav a:not(.nav-cta) { color: var(--blanc); text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.entete-sur-image .entete:not(.defile) .logo-fonce { opacity: 0; }
.entete-sur-image .entete:not(.defile) .logo-clair { opacity: 1; }

/* --- Offres --- */
.bascule { display: flex; justify-content: center; gap: 6px; width: max-content; max-width: 100%; margin: 0 auto 56px; padding: 6px; border-radius: 999px; background: var(--rose-pale); }
.bascule-bouton { border: 0; background: transparent; padding: 14px 28px; border-radius: 999px; font-weight: 700; cursor: pointer; transition: background .25s, color .25s; }
.bascule-bouton.actif { background: var(--rouge); color: var(--blanc); }
.onglet { display: none; }
.onglet.actif { display: block; }
.tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1240px; margin: 0 auto; align-items: center; }
.tarifs-duo { grid-template-columns: repeat(2, 1fr); max-width: 860px; }
.tarif { position: relative; border: 2px solid var(--rose-doux); border-radius: var(--rayon); padding: 44px 36px; display: flex; flex-direction: column; background: var(--blanc); }
.tarif-vedette { background: var(--rouge); color: var(--blanc); border-color: var(--rouge); padding: 60px 36px; box-shadow: 0 40px 80px -40px rgba(143,13,38,.8); }
.ruban { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--rose-doux); color: var(--rouge-profond); font-weight: 700; font-size: 13px; padding: 7px 16px; border-radius: 999px; white-space: nowrap; }
.tarif-prix { font-family: var(--serif); font-size: 58px; line-height: 1; margin: 16px 0 6px; }
.tarif-intro { color: var(--texte-doux); margin: 0 0 24px; }
.tarif-vedette .tarif-intro { color: #ffe1e8; }
.tarif ul { list-style: none; padding: 0; margin: 0 0 32px; }
.tarif li { padding: 10px 0 10px 28px; position: relative; border-top: 1px solid var(--rose-pale); }
.tarif-vedette li { border-color: rgba(255,255,255,.25); }
.tarif li::before { content: "♥"; position: absolute; left: 0; color: var(--rouge); }
.tarif-vedette li::before { color: var(--rose-doux); }
.tarif .bouton { justify-content: center; }
.options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto; }
.option { background: var(--blanc); border-radius: 22px; padding: 26px 28px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.option span { color: var(--rouge); font-size: 22px; }
.option h3 { font-size: 21px; }
.option-prix { margin: 0; font-weight: 700; color: var(--rouge); }
.tableau-defile { overflow-x: auto; max-width: 1000px; margin: 0 auto; }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th { font-family: var(--serif); font-weight: 400; font-size: 26px; padding: 16px; }
th:not(:first-child), td:not(:first-child) { text-align: center; }
td { padding: 18px 16px; border-top: 1px solid var(--rose-doux); }
td:not(:first-child) { color: var(--rouge); font-weight: 700; }
tbody tr:nth-child(odd) { background: var(--rose-pale); }

/* --- Studio --- */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); max-width: 1200px; margin: 0 auto; }
.portrait-image { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--rayon) var(--rayon); overflow: hidden; margin-bottom: 26px; }
.portrait-image img { width: 100%; height: 100%; object-fit: cover; }
.portrait h2 { margin-bottom: 8px; }
.portrait > p:last-child { color: var(--texte-doux); }
.portrait-decale { margin-top: 120px; }
.valeurs-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1340px; margin: 0 auto; }
.valeur { padding: 34px 28px; border-radius: var(--rayon); background: var(--rose-pale); }
.valeur:nth-child(2n) { background: var(--rouge); color: var(--blanc); }
.valeur:nth-child(2n) p { color: #ffe1e8; }
.valeur:nth-child(2n) .valeur-num { color: var(--rose-doux); }
.valeur-num { font-family: var(--serif); font-style: italic; font-size: 44px; color: var(--rouge); display: block; margin-bottom: 18px; }
.valeur p { color: var(--texte-doux); margin: 12px 0 0; }
.etapes { list-style: none; padding: 0; margin: 0 auto; max-width: 1340px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: etape; }
.etapes li { counter-increment: etape; background: var(--blanc); border-radius: var(--rayon); padding: 30px 24px; }
.etapes li::before { content: counter(etape); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rouge); color: var(--blanc); font-weight: 700; margin-bottom: 20px; }
.etapes h3 { font-size: 24px; }
.etapes p { color: var(--texte-doux); margin: 10px 0 0; }

/* --- Contact --- */
.contact { display: grid; grid-template-columns: 1fr 1.15fr; min-height: calc(100vh - 128px); }
.contact-visuel { position: relative; }
.contact-visuel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact-carte { position: absolute; left: 30px; right: 30px; bottom: 30px; background: var(--blanc); border-radius: var(--rayon); padding: 28px 30px; display: flex; flex-direction: column; gap: 4px; }
.contact-carte a { font-family: var(--serif); font-size: 24px; text-decoration: none; }
.contact-carte a:hover { color: var(--rouge); }
.contact-carte p:last-child { margin: 8px 0 0; color: var(--texte-doux); font-size: 15px; }
.contact-formulaire { padding: clamp(50px, 7vw, 110px) var(--marge); }
.progression { display: flex; gap: 8px; margin: 36px 0 40px; }
.progression span { height: 6px; flex: 1; border-radius: 6px; background: var(--rose-pale); transition: background .3s; }
.progression span.actif { background: var(--rouge); }
fieldset { border: 0; padding: 0; margin: 0; display: none; }
fieldset.actif { display: block; }
legend { font-family: var(--serif); font-size: 32px; margin-bottom: 26px; padding: 0; }
.champs { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 34px; }
label { display: flex; flex-direction: column; gap: 8px; font-weight: 700; font-size: 14px; }
input, select, textarea { font: inherit; font-weight: 500; font-size: 16px; color: var(--texte); border: 2px solid var(--rose-pale); background: var(--rose-pale); border-radius: 16px; padding: 14px 16px; transition: border-color .25s, background .25s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rouge); background: var(--blanc); }
input.erreur { border-color: var(--rouge); background: #ffe1e8; }
.champ-plein { margin-bottom: 34px; }
.choix-puces { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 34px; }
.choix-puces p { width: 100%; margin: 0 0 4px; font-weight: 700; font-size: 14px; }
.choix-puces label { display: block; }
.choix-puces input { position: absolute; opacity: 0; pointer-events: none; }
.choix-puces span { display: inline-block; padding: 10px 20px; border-radius: 999px; border: 2px solid var(--rose-doux); cursor: pointer; font-weight: 700; transition: background .2s, color .2s, border-color .2s; }
.choix-puces input:checked + span { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.choix-puces input:focus-visible + span { outline: 2px solid var(--rouge); outline-offset: 2px; }
.navigation-etapes { display: flex; justify-content: space-between; align-items: center; }
/* Parcours de contact pas à pas (28/10) : une question par écran, qui glisse doucement */
/* Toutes les étapes sont empilées au même endroit : le bloc garde la hauteur de la plus grande,
   la page ne bouge donc plus d'une question à l'autre. Passage en fondu glissé. */
#parcours { display: grid; min-height: 570px; } /* place de l'étape la plus haute (formules détaillées, message) */
#parcours .etape { grid-area: 1 / 1; display: block; visibility: hidden; opacity: 0; transform: translateY(16px); transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1), visibility 0s linear .45s; }
#parcours .etape.actif { visibility: visible; opacity: 1; transform: none; transition: opacity .45s cubic-bezier(.2,.7,.2,1) .08s, transform .45s cubic-bezier(.2,.7,.2,1) .08s, visibility 0s; }
@media (prefers-reduced-motion: reduce) { #parcours .etape { transition: none; transform: none; } }

.etape-question { font-size: clamp(28px, 2.3vw, 42px); margin: 0 0 22px; }
.etape-aide { margin: -8px 0 22px; color: var(--texte-doux); font-size: 15px; }
.choix-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 30px; }
.carte-choix { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 24px 22px; border: 1.5px solid var(--rose-doux); border-radius: 6px; background: var(--blanc); font: inherit; color: var(--texte); text-align: left; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.carte-choix-titre { font-family: var(--serif); font-size: clamp(22px, 1.6vw, 30px); line-height: 1.1; }
.carte-choix-sous { font-size: 14px; color: var(--texte-doux); }
.carte-choix-prix { margin-top: 6px; font-family: var(--serif); font-size: 24px; color: var(--rouge); }
.carte-choix:hover, .carte-choix.choisi { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.carte-choix:hover .carte-choix-sous, .carte-choix:hover .carte-choix-prix, .carte-choix.choisi .carte-choix-sous, .carte-choix.choisi .carte-choix-prix { color: var(--blanc); }
/* Le détail de chaque formule est toujours affiché dans sa carte (demandé le 28/10) */
.carte-choix-inclus { list-style: none; margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid var(--rose-doux); font-size: 13px; line-height: 1.5; color: var(--texte); }
.carte-choix-inclus li { padding: 2px 0; }
.carte-choix-inclus li::before { content: "✓"; margin-right: 7px; color: var(--rouge); font-weight: 700; }
.carte-choix:hover .carte-choix-inclus, .carte-choix.choisi .carte-choix-inclus { color: var(--blanc); border-color: rgba(255,255,255,.4); }
.carte-choix:hover .carte-choix-inclus li::before, .carte-choix.choisi .carte-choix-inclus li::before { color: var(--blanc); }
#choix-formules .carte-choix { justify-content: flex-start; }
.carte-choix-autre { border-style: dashed; }
.choix-puces span small { font-weight: 500; opacity: .8; margin-left: 4px; }
.message-apercu { white-space: pre-line; padding: 22px 24px; margin-bottom: 24px; border-left: 3px solid var(--rouge); background: var(--rose-pale); font-size: 15px; line-height: 1.7; color: var(--texte); max-height: 340px; overflow: auto; }
.envoi-boutons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.envoi-bouton { display: block; padding: 16px 10px; border: 1.5px solid var(--rouge); background: var(--blanc); color: var(--rouge); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-align: center; text-decoration: none; cursor: pointer; transition: background .25s, color .25s; }
.envoi-bouton:hover { background: var(--rouge); color: var(--blanc); }
.envoi-note { margin: 0 0 20px; font-size: 14px; color: var(--rouge); font-weight: 700; }
.merci { text-align: center; padding: 50px 0; }
.merci-fleur { display: grid; place-items: center; width: 90px; height: 90px; margin: 0 auto 24px; border-radius: 50%; background: var(--rouge); color: var(--blanc); font-size: 44px; }
.merci p { color: var(--texte-doux); }
.faq { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details { background: var(--blanc); border-radius: 22px; padding: 0 28px; }
.faq summary { cursor: pointer; list-style: none; font-family: var(--serif); font-size: clamp(20px, 2vw, 25px); padding: 24px 40px 24px 0; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--rose-pale); color: var(--rouge); display: grid; place-items: center; font-family: var(--sans); font-weight: 700; transition: background .25s, color .25s; }
.faq details[open] summary::after { content: "–"; background: var(--rouge); color: var(--blanc); }
.faq details p { margin: 0 0 26px; color: var(--texte-doux); }

/* ==========================================================
   Pied de page
   ========================================================== */
/* Pied de page identique à celui de barghachpictures.com (.site-footer) : couleurs inversées à sa demande
   (fond blanc, logo noir rogné), Garamond, gris. Mesures du site × 110/90, espacements resserrés à sa demande, comme l'en-tête (zoom de son Chrome différent entre les deux sites). */
.pied { background: #ffffff; color: #303030; padding: 56px 0 26px; font-family: "AGaramond", Garamond, Georgia, serif; }
.pied-grille { max-width: 1564px; margin: 0 auto; padding: 0 59px; display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 36px; align-items: start; }
.pied-marque { display: flex; flex-direction: column; }
/* Conteneur qui épouse la largeur du logo : la ligne du dessous se justifie sur cette largeur */
.pied-logo-bloc { display: inline-block; align-self: flex-start; margin-bottom: 14px; }
.pied-logo { display: block; height: 196px; width: auto; object-fit: contain; margin-bottom: 10px; filter: invert(1); }
.pied-tagline { width: 100%; margin: 0; font-size: 14.7px; text-transform: uppercase; color: #161616; text-align: justify; text-align-last: justify; }
.pied-baseline { margin: 0 0 18px; font-style: italic; font-size: 20.5px; color: #656565; }
.pied-socials { display: flex; align-items: center; gap: 18px; }
.pied-social { display: inline-flex; }
.pied-social svg { width: 26px; height: 26px; fill: #000000; opacity: .9; transition: opacity .2s ease, transform .2s ease; }
.pied-social:hover svg { opacity: 1; transform: translateY(-2px); }
.pied-titre { font-size: 16px; font-weight: normal; letter-spacing: .22em; text-transform: uppercase; color: #707070; margin: 0 0 16px; }
.pied-col a { display: block; text-decoration: none; font-size: 20.5px; color: #2d2d2d; margin-bottom: 10px; transition: color .2s ease; }
.pied-col a:hover { color: #000000; }
.pied-bas { max-width: 1564px; margin: 36px auto 0; padding: 20px 29px 0 59px; box-sizing: border-box; border-top: 1px solid rgba(0, 0, 0, 0.14); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pied-copy { margin: 0; font-size: 18px; color: #757575; }
.pied-bas-liens { display: flex; gap: 30px; }
.pied-bas-liens a { font-size: 18px; color: #5a5a5a; text-decoration: none; transition: color .2s ease; }
.pied-bas-liens a:hover { color: #000000; }

/* --- Visionneuse --- */
.visionneuse { position: fixed; inset: 0; z-index: 100; background: rgba(59,10,22,.96); display: flex; align-items: center; justify-content: center; }
.visionneuse[hidden] { display: none; }
.v-contenu img, .v-contenu video { max-width: 90vw; max-height: 86vh; border-radius: 16px; }
.v-contenu video { width: min(90vw, 1400px); background: #000; }
.visionneuse button { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--blanc); color: var(--rouge); font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.v-fermer { top: 20px; right: 20px; }
.v-prec { left: 20px; top: 50%; margin-top: -28px; }
.v-suiv { right: 20px; top: 50%; margin-top: -28px; }
.visionneuse.mode-video .v-prec, .visionneuse.mode-video .v-suiv { display: none; }

/* ==========================================================
   Tablette
   ========================================================== */
@media (max-width: 1080px) {
    .nav { gap: 22px; }
    .services-grille, .grille-films { grid-template-columns: 1fr 1fr; }
    .formats-grille, .valeurs-grille { grid-template-columns: 1fr 1fr; }
    .etapes { grid-template-columns: 1fr 1fr; }
    .tarifs { grid-template-columns: 1fr; max-width: 520px; }
    .tarifs-duo { grid-template-columns: 1fr; }
    .options { grid-template-columns: 1fr 1fr; }
    .galerie { grid-template-columns: repeat(3, 1fr); }
    .pied-grille { grid-template-columns: 1fr 1fr 1fr; }
    .pied-marque { grid-column: 1 / -1; }
}

/* Le menu passe en plein écran sous 960 px */
@media (max-width: 960px) {
    .burger { display: flex; z-index: 2; }
    .entete-actions { display: none; }
    .nav { position: fixed; inset: 0; z-index: 1; flex-direction: column; justify-content: center; gap: 22px; background: var(--rouge); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
    .nav a { color: var(--blanc) !important; font-family: var(--serif); font-size: 36px; font-weight: 400; text-shadow: none !important; }
    .nav a::after { display: none; }
    .nav a.actif { font-style: italic; color: var(--rose-doux) !important; }
    .nav-cta { background: var(--blanc); color: var(--rouge) !important; font-family: var(--sans) !important; font-size: 17px !important; font-weight: 700 !important; padding: 16px 30px; margin-top: 10px; }
    .menu-ouvert .nav { opacity: 1; visibility: visible; }
    .menu-ouvert .burger span { background: var(--blanc) !important; }
    .menu-ouvert .burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .menu-ouvert .burger span:nth-child(2) { opacity: 0; }
    .menu-ouvert .burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .entete { grid-template-columns: 1fr auto; }
    .entete-cta { display: none; }
    .nav-cta-menu { display: inline-block; }
    .nav .nav-langue { display: inline-block; font-family: var(--sans) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .16em; text-transform: uppercase; color: var(--rose-doux) !important; }
    .menu-ouvert .marque { z-index: 2; }
    .menu-ouvert .logo-fonce { opacity: 0 !important; }
    .menu-ouvert .logo-clair { opacity: 1 !important; filter: none; }

    .une { grid-template-columns: 1fr; }
    .une-visuel { max-width: 560px; margin: 0 auto; width: 100%; justify-self: center; }
    .citation, .coulisses, .histoire, .fiche, .contact { grid-template-columns: 1fr; }
    .histoire-inverse .histoire-image { order: 0; }
    .contact-visuel { min-height: 70vw; }
    .cartes-histoires { grid-template-columns: 1fr 1fr; }
    .cartes-histoires .carte-histoire:last-child { display: none; }
}

/* ==========================================================
   Téléphone (seuil au-dessus de 520 px)
   ========================================================== */
@media (max-width: 640px) {
    body { font-size: 16px; }
    .entete { padding: 12px 16px; }
    /* Logo en entier (à sa demande), le plus grand possible dans l'en-tête de 64 px */
    .entete { height: 64px; padding: 0 6px 0 18px; }
    .marque { width: 74px; height: 56px; }
    /* Trois traits un peu plus grands : 38 px de large, 10 px d'écart */
    .burger { width: 52px; height: 52px; padding: 15px 7px; }
    .menu-ouvert .burger span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
    .menu-ouvert .burger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
    .une { padding-top: 26px; }
    .une h1 { font-size: clamp(42px, 12vw, 60px); }
    .pastille { left: -6px; top: auto; bottom: 30px; width: 104px; height: 104px; }
    .pastille text { font-size: 10px; letter-spacing: 1.6px; }
    .une-vignette { right: -6px; bottom: -26px; width: 34%; border-width: 5px; }
    .services-grille, .grille-films, .formats-grille, .valeurs-grille, .etapes, .options, .champs, .duo, .cartes-histoires { grid-template-columns: 1fr; }
    .cartes-histoires .carte-histoire:last-child { display: block; }
    .carte-decalee, .portrait-decale { margin-top: 0; }
    .chiffres-rouges { grid-template-columns: 1fr 1fr; padding: 50px 16px; }
    .mosaique { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 160px 160px; gap: 10px; }
    .m1 { grid-column: 1 / 3; grid-row: 1; }
    .m2 { grid-column: 1; grid-row: 2; } .m3 { grid-column: 2; grid-row: 2 / 4; }
    .m4 { grid-column: 1; grid-row: 3; } .m5 { display: none; }
    .galerie, .galerie-histoire { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; gap: 8px; }
    .case.large { grid-column: span 2; }
    .entete-page::after { font-size: 220px; right: -30px; opacity: .6; }
    .une-histoire { height: 78vh; }
    .une-histoire-texte { left: 16px; right: 16px; bottom: 20px; padding: 24px; }
    .bascule-bouton { padding: 12px 16px; font-size: 14px; }
    .option { grid-template-columns: auto 1fr; }
    .option-prix { grid-column: 2; }
    .contact-carte { left: 14px; right: 14px; bottom: 14px; padding: 20px; }
    .contact-carte a { font-size: 19px; }
    .contact-formulaire { padding: 50px 16px; }
    .pied-grille { grid-template-columns: 1fr; }
    .visionneuse button { width: 46px; height: 46px; }
    .v-prec { left: 8px; } .v-suiv { right: 8px; }
    .bande { padding: 14px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .bande-piste, .pastille svg { animation: none; }
    html { scroll-behavior: auto; }
}

/* ==========================================================
   Page Offres (refaite le 28/10) : un bloc « regard sincère » par offre, côtés alternés
   ========================================================== */
html { scroll-padding-top: 40px; }
.offre-bloc { position: relative; background: var(--blanc); padding: clamp(40px, 2.8vw, 56px) 0 clamp(36px, 2.4vw, 48px); display: grid; grid-template-columns: 9.5vw 41vw 4.1vw 36vw 9.5vw; grid-template-rows: auto 1fr; overflow: hidden; }
.offre-bloc.offre-inverse { background: var(--rose-pale); grid-template-columns: 9.5vw 36vw 4.1vw 41vw 9.5vw; }
/* Fonds inversés à sa demande (28/10) : Film et Film & photo en blanc, Photo en rose pâle */
.offre-bloc .sincere-filigrane { top: 3.6vw; color: var(--rose-pale); }
.offre-inverse .sincere-filigrane { color: var(--blanc); }
.offre-titre { grid-column: 2 / 5; grid-row: 1; position: relative; z-index: 2; padding-top: 0.6vw; }
.offre-inverse .offre-titre { text-align: right; }
.offre-titre .sincere-titre-2 { white-space: nowrap; }
.offre-num { margin: 0 0 4px; font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 1.6vw, 30px); color: var(--rouge); letter-spacing: .1em; }
.offre-titre h2 { font-size: clamp(48px, 4.4vw, 90px); text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; }
.offre-photo { grid-column: 4; grid-row: 2; position: relative; z-index: 1; align-self: stretch; margin-top: 1.6vw; height: auto; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,.35); }
.offre-inverse .offre-photo { grid-column: 2; }
.offre-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.offre-texte { grid-column: 2; grid-row: 2; position: relative; z-index: 2; padding-top: 1.6vw; }
.offre-inverse .offre-texte { grid-column: 4; }
.offre-intro { margin: 0 0 1.3vw; max-width: 600px; font-size: clamp(15px, 1vw, 18px); line-height: 1.75; color: var(--texte-doux); }
.formules { display: flex; flex-direction: column; border-top: 1px solid var(--rose-doux); }
.formule { display: block; padding: 0.85vw 1.4vw; border-bottom: 1px solid var(--rose-doux); color: var(--texte); transition: background .3s; }
.formule-haut { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
.formule h3 { margin: 0; font-size: clamp(26px, 2vw, 40px); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.formule-badge { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blanc); background: var(--rouge); padding: 6px 12px; border-radius: 999px; }
.formule-prix { margin: 0; font-family: var(--serif); font-size: clamp(26px, 2vw, 40px); color: var(--rouge); white-space: nowrap; }
.formule-intro { margin: 2px 0 2px; font-weight: 700; font-size: 15px; }
.formule-details { margin: 0; font-size: 14px; line-height: 1.6; color: var(--texte-doux); }
.formule-milieu { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
/* Deux boutons par formule : « Voir le détail » déplie le panneau dessous, « Choisir » mène au contact */
.formule-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.formule-voir, .formule-choisir { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; padding: 8px 14px; border: 1.5px solid var(--rouge); cursor: pointer; text-decoration: none; transition: background .25s, color .25s; }
.formule-voir { background: transparent; color: var(--rouge); }
.formule-voir span { display: inline-block; margin-left: 4px; transition: transform .25s; }
.formule-voir[aria-expanded="true"] span { transform: rotate(45deg); }
.formule-choisir { background: var(--rouge); color: var(--blanc); }
.formule-voir:hover { background: var(--rouge); color: var(--blanc); }
.formule-choisir:hover { background: var(--rouge-profond); border-color: var(--rouge-profond); }
/* Le détail s'ouvre en glissant vers le bas (hauteur 0 → hauteur réelle) ; plusieurs peuvent être ouverts.
   La photo du bloc garde sa hauteur (figée par js/main.js) : seul ce qui est dessous descend. */
.formule-detail { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease; }
.formule-detail.ouvert { grid-template-rows: 1fr; opacity: 1; }
.formule-detail-int { overflow: hidden; min-height: 0; }
.formule-detail-boite { margin-top: 12px; padding: 14px 18px; border-left: 3px solid var(--rouge); background: var(--blanc); font-size: 14px; line-height: 1.7; color: var(--texte-doux); }
.formule-detail-boite { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.detail-titre { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rouge); }
.formule-detail-boite ul { list-style: none; margin: 0; padding: 0; }
.formule-detail-boite li { padding: 3px 0; }
.detail-inclus li::before { content: "✓"; margin-right: 8px; color: var(--rouge); font-weight: 700; }
.detail-options li::before { content: "+"; margin-right: 8px; color: var(--rouge); font-weight: 700; }
.offre-photo.fige { align-self: start; }
@media (prefers-reduced-motion: reduce) { .formule-detail { transition: none; } }
.formule-vedette { background: var(--rose-pale); }
.offre-inverse .formule-vedette { background: rgba(255,255,255,.75); }

/* À la carte (refait le 28/10) : fond blanc, même allure que les blocs d'offres
   (texte qui défile, grand titre), options en cartes qui passent au rouge au survol */
.plus-bloc { position: relative; overflow: hidden; display: grid; grid-template-columns: 9.5vw 36vw 4.1vw 41vw 9.5vw; grid-template-rows: auto 1fr; background: var(--blanc); color: var(--texte); padding: clamp(40px, 2.8vw, 56px) 0 clamp(44px, 3vw, 60px); border-top: 1px solid var(--rose-pale); }
.plus-bloc .sincere-filigrane { top: 3.6vw; color: var(--rose-pale); }
.plus-photo { grid-column: 2; grid-row: 2; position: relative; z-index: 1; margin-top: 1.6vw; overflow: hidden; box-shadow: 0 24px 60px -20px rgba(0,0,0,.35); }
.plus-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plus-titre { grid-column: 2 / 5; grid-row: 1; position: relative; z-index: 2; padding-top: 0.6vw; text-align: right; }
.plus-titre h2 { font-size: clamp(48px, 4.4vw, 90px); text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; }
.plus-titre .sincere-titre-2 { white-space: nowrap; }
.plus-contenu { grid-column: 4; grid-row: 2; position: relative; z-index: 2; padding-top: 1.6vw; }
.plus-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plus-option { display: flex; flex-direction: column; gap: 6px; padding: 1.8vw 1.4vw; min-height: 8vw; border: 1px solid var(--rose-doux); border-radius: 6px; background: var(--blanc); transition: background .3s, border-color .3s; }
.plus-fleur { color: var(--rouge); font-size: 18px; line-height: 1; }
.plus-option h3 { margin: 0; color: var(--texte); font-size: clamp(18px, 1.25vw, 24px); line-height: 1.2; }
.plus-note { font-size: 13px; color: var(--texte-doux); }
.plus-option:hover .plus-note { color: #ffe1e8; }
.plus-option p { margin: auto 0 0; padding-top: 10px; font-family: var(--serif); font-size: clamp(26px, 2vw, 40px); color: var(--rouge); white-space: nowrap; }
.plus-option:hover { background: var(--rouge); border-color: var(--rouge); }
.plus-option:hover h3, .plus-option:hover p, .plus-option:hover .plus-fleur { color: var(--blanc); }
.plus-inclus { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 1.6vw; padding-top: 1.4vw; border-top: 1px solid var(--rose-doux); }
.plus-inclus p { margin: 0 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rouge); }
.plus-inclus span { padding: 7px 14px; border-radius: 999px; background: var(--rose-pale); font-size: 13px; color: var(--texte); }

@media (max-width: 960px) {
    .offre-bloc, .offre-bloc.offre-inverse { grid-template-columns: 1fr; padding: 60px 16px; row-gap: 30px; }
    .offre-titre, .offre-photo, .offre-texte, .offre-inverse .offre-titre, .offre-inverse .offre-photo, .offre-inverse .offre-texte { grid-column: 1; grid-row: auto; margin: 0; text-align: left; }
    .offre-photo { height: 110vw; }
    .offre-titre .sincere-titre-2 { white-space: normal; }
    .formule { padding: 18px 10px; }
    .plus-bloc { grid-template-columns: 1fr; padding: 60px 16px; row-gap: 30px; }
    .plus-photo, .plus-titre, .plus-contenu { grid-column: 1; grid-row: auto; margin: 0; text-align: left; }
    .plus-photo { height: 70vw; }
    .plus-titre .sincere-titre-2 { white-space: normal; }
    .plus-grille { grid-template-columns: 1fr 1fr; }
    .formule-milieu { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================
   TÉLÉPHONE — même design que sur ordinateur, proportions recalculées (28/10/2026)
   Repères pour un écran de 390 px : photos de 200 à 300 px de haut, titres de section
   de 26 à 30 px, texte de 14 à 15 px, sections de 40 px de marge haute et basse.
   Tout est rangé sous ce seuil : la version ordinateur n'est jamais touchée
   (vérifié par comparaison d'empreinte de mise en page, voir _outils/test-mobile.html).
   ========================================================== */
@media (max-width: 640px) {
    :root { --marge: 20px; }
    /* Les tailles de base des titres partaient de 46 px (h1) et 36 px (h2) : c'était la cause
       des titres géants sur téléphone */
    h1 { font-size: 30px; line-height: 1.08; }
    h2 { font-size: 26px; line-height: 1.1; }
    h3 { font-size: 20px; line-height: 1.15; }
    h1, h2, h3, .bio-titre-2, .histoire-bloc-sous { text-wrap: balance; }
    .etiquette { font-size: 11px; margin-bottom: 10px; }
    .section, .section-rose { padding: 40px var(--marge); }
    .titre-bloc { margin-bottom: 20px; }
    .chapeau { font-size: 14px; line-height: 1.55; margin-top: 12px; }
    .bouton-carre { padding: 13px 22px; font-size: 12px; margin-top: 18px; }
    .bouton { padding: 12px 22px; font-size: 14px; }

    /* --- Ouverture de l'accueil : bandeau photo de 300 px sous l'en-tête --- */
    .bloc-photo-haut { height: calc(64px + 300px); min-height: 0; padding: 64px 20px 24px; }
    .bloc-photo-titre { font-size: 40px; }
    .bloc-photo-sous { margin-top: 6px; font-size: 15px; }

    /* --- En-têtes de page sur photo (Gallery, Histoires, Offres) : 340 px en tout --- */
    .entete-photo { height: 340px; min-height: 0; padding: 64px var(--marge) 24px; display: flex; flex-direction: column; justify-content: flex-end; }
    .entete-photo h1 { font-size: 28px; line-height: 1.08; }
    .entete-photo .etiquette { margin-bottom: 8px; }
    .entete-photo .chapeau { margin-top: 8px; font-size: 13.5px; line-height: 1.5; }

    /* --- « Parce qu'un mariage… » --- */
    .histoire-bloc { padding: 32px var(--marge) 40px; row-gap: 20px; }
    .histoire-bloc-photo { height: 240px; }
    .histoire-bloc .filigrane { font-size: 52px; }
    .histoire-bloc h2 { font-size: 20px; line-height: 1.2; margin-bottom: 12px; }
    .histoire-bloc-sous { font-size: 16px; margin-bottom: 12px; }
    .histoire-bloc-texte p:not(.filigrane):not(.histoire-bloc-sous) { font-size: 14px; line-height: 1.65; margin-bottom: 10px; }
    .histoire-bloc .bouton-carre { width: 100%; text-align: center; }

    /* --- Grands mots qui défilent en fond (« carrousel ») : même effet, en plus petit --- */
    .sincere-filigrane { top: 18px; font-size: 52px; line-height: 1.3; }

    /* --- « Un regard sincère » --- */
    .sincere { padding: 40px var(--marge); row-gap: 16px; }
    .sincere-titre { padding-top: 0; }
    .sincere-titre h2 { font-size: 28px; }
    .sincere-photo { height: 230px; }
    .sincere-texte { padding-top: 4px; }
    .sincere-texte p { font-size: 14px; line-height: 1.65; text-align: left; }
    .sincere-texte h3 { font-size: 20px; margin: 16px 0 10px; text-align: left; }
    .sincere-texte .bouton-carre { width: 100%; text-align: center; margin-top: 20px; }

    /* --- Bande Explorer / Informations / Contact --- */
    .liens-bande { padding: 10px 0; min-height: 0; }
    .liens-bande a { padding: 9px 0; }
    .liens-titre { font-size: 20px; }
    .liens-sous { margin-top: 3px; font-size: 11px; }

    /* --- Bio de Mourad --- */
    .bio-photo { height: 280px; }
    .bio-photo img { object-position: 52% 30%; }
    .bio-texte { padding: 28px var(--marge) 40px; }
    .bio-titre { margin-bottom: 20px; }
    .bio-titre h2 { white-space: nowrap; font-size: min(28px, calc((100vw - 2 * var(--marge)) / 11.8)); }
    .bio-titre-2 { font-size: 17px; }
    .bio-texte > p { font-size: 14px; line-height: 1.65; margin-bottom: 10px; }
    .bio-puces { margin: 14px 0 16px; }
    .bio-puces li { font-size: 16px; }
    .bio-texte .bouton-carre { display: block; text-align: center; margin-top: 20px; }

    /* --- « Ils ont dit oui » (accueil et Histoires) --- */
    .hr-liste { gap: 44px; padding-top: 0; }
    .hr-ligne, .hr-inverse { gap: 22px; }
    .hr-seconde { border-width: 5px; right: -2%; bottom: -12%; width: 28%; }
    .hr-portrait .hr-principale { width: 58%; }
    .hr-portrait .hr-seconde { left: 4%; bottom: 10%; width: 32%; }
    .hr-num { font-size: 44px; margin-bottom: 2px; }
    .hr-lieu { font-size: 11px; margin-bottom: 8px; }
    .hr-texte h3 { font-size: 26px; }
    .hr-desc { font-size: 14.5px; line-height: 1.6; margin: 10px 0 6px; }
    .hr-details { margin-bottom: 10px; font-size: 12px; }
    .lien-fleche { display: inline-block; padding: 8px 0; font-size: 14px; }
    .hr-suivante { padding: 26px 20px; row-gap: 8px; }
    .hr-suivante-num { font-size: 40px; }
    .hr-suivante h3 { font-size: 22px; }
    .hr-suivante-texte { font-size: 14px; margin-top: 4px; }
    .hr-suivante .bouton-carre { margin-top: 8px; width: 100%; text-align: center; }

    /* --- Bandeaux photo + texte (« L'heure est venue », « Nos films… », « Votre date… ») --- */
    .pret-image { height: 200px; }
    .pret-voile { display: none; }
    .pret-texte { padding: 26px var(--marge) 32px; }
    .pret-grand { font-size: 38px; }
    .pret-sous { font-size: 15px; margin-top: 4px; }
    .pret h3 { margin: 18px 0 10px; font-size: 18px; }
    .pret-texte p { font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
    .pret .bouton-carre-blanc { display: block; text-align: center; margin: 16px 0 0; }

    /* --- Gallery : mosaïque sur deux colonnes, cases basses (rangée = 62 % de la largeur d'une colonne) --- */
    .galerie-melangee { width: auto; margin-left: 0; transform: none; grid-template-columns: 1fr 1fr; gap: 6px; }
    .case, .tuile-film { border-radius: 10px; }
    .galerie-melangee { grid-auto-flow: dense; grid-auto-rows: calc((100vw - 2 * var(--marge) - 6px) / 2 * 0.62); }
    .galerie-melangee .case[style*="--c"] { grid-column: auto / span 1; grid-row: auto / span 1; }
    .galerie-melangee .case.tel-grande { grid-column: auto / span 2; grid-row: auto / span 2; }
    .galerie-melangee .case.tel-haute { grid-row: auto / span 2; }
    .galerie-histoire { gap: 6px; grid-auto-rows: calc((100vw - 2 * var(--marge) - 6px) / 2 * 0.62); }

    /* --- Pages des couples --- */
    .une-histoire { height: 360px; min-height: 0; }
    .une-histoire-texte { left: var(--marge); right: var(--marge); bottom: 16px; padding: 14px 18px; border-radius: 16px; }
    .une-histoire-texte h1 { font-size: 28px; }
    .une-histoire-texte p:last-child { margin-top: 4px; font-size: 13px; }
    .fiche { gap: 20px; }
    .fiche-infos { grid-template-columns: 1fr 1fr; column-gap: 16px; }
    .fiche-infos div { padding: 8px 0; }
    .fiche-infos dt { font-size: 11px; }
    .fiche-infos dd { font-size: 17px; }
    .fiche-recit p { font-size: 15px; line-height: 1.65; margin-bottom: 12px; }
    .fiche:has(+ .histoire-galerie) { padding-bottom: 20px; }
    .histoire-galerie { padding-top: 16px; padding-bottom: 16px; }
    .histoire-galerie + .suite { padding-top: 16px; padding-bottom: 36px; flex-direction: column-reverse; align-items: stretch; gap: 10px; text-align: center; }
    .suite .bouton { justify-content: center; }

    /* --- Offres --- */
    .offre-bloc, .offre-bloc.offre-inverse { padding: 36px var(--marge) 40px; row-gap: 14px; }
    .offre-num { font-size: 15px; }
    .offre-titre h2 { font-size: 30px; }
    .offre-photo { height: 240px; aspect-ratio: auto; max-height: none; margin-top: 4px; }
    .offre-texte { padding-top: 0; }
    .offre-intro { font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
    .formule { display: flex; flex-direction: column; padding: 14px 4px; }
    .formule-vedette { padding-left: 10px; padding-right: 10px; }
    .formule-milieu { display: contents; }
    .formule-haut { order: 1; }
    .formule h3 { font-size: 21px; gap: 10px; }
    .formule-intro { order: 2; margin-top: 4px; font-size: 14px; }
    .formule-details { order: 3; margin-top: 2px; font-size: 13px; }
    .formule-actions { order: 4; margin-top: 12px; width: 100%; gap: 8px; }
    .formule-detail { order: 5; }
    .formule-voir, .formule-choisir { flex: 1; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 6px; font-size: 12px; letter-spacing: .08em; }
    .formule-detail-boite { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px; font-size: 13px; }
    .plus-bloc { padding: 36px var(--marge) 40px; row-gap: 14px; }
    .plus-titre { order: 1; text-align: left; padding-top: 0; }
    .plus-titre h2 { font-size: 30px; }
    .plus-photo { order: 2; height: 200px; aspect-ratio: auto; margin-top: 4px; }
    .plus-contenu { order: 3; padding-top: 4px; }
    .plus-grille { grid-template-columns: 1fr; gap: 6px; }
    .plus-option { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; min-height: 0; padding: 11px 14px; gap: 2px 12px; }
    .plus-fleur { grid-row: span 2; font-size: 15px; }
    .plus-option h3 { font-size: 17px; }
    .plus-inclus { margin-top: 16px; padding-top: 14px; gap: 6px; }
    .plus-inclus span { padding: 6px 12px; font-size: 12px; }

    /* --- Contact --- */
    .contact-visuel { display: flex; flex-direction: column; min-height: 0; }
    .contact-visuel > img { position: relative; height: 210px; }
    .contact-carte { position: relative; left: auto; right: auto; bottom: auto; margin: -32px var(--marge) 0; padding: 16px 20px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.3); }
    .contact-carte a { font-size: 17px; }
    .contact-carte p:last-child { font-size: 13px; }
    .contact-formulaire { padding: 32px var(--marge) 40px; }
    .contact-formulaire h1 { font-size: 30px; }
    .progression { margin: 18px 0 22px; }
    /* Une question à la fois, sans réserver la place de la plus grande ; le formulaire
       remonte tout seul en haut de l'écran à chaque étape (js/main.js) */
    #parcours { min-height: 0; }
    #parcours .etape { display: none; }
    #parcours .etape.actif { display: block; animation: etape-entre .4s cubic-bezier(.2,.7,.2,1); }
    .etape-question { font-size: 21px; margin-bottom: 14px; }
    .etape-aide { font-size: 13.5px; margin: -6px 0 16px; }
    .choix-cartes { grid-template-columns: 1fr; gap: 8px; margin-bottom: 18px; }
    .carte-choix { padding: 14px 16px; gap: 4px; }
    .carte-choix-titre { font-size: 20px; }
    .carte-choix-sous { font-size: 13px; }
    .carte-choix-inclus { margin-top: 6px; padding-top: 6px; font-size: 12.5px; }
    .champs { gap: 14px; margin-bottom: 18px; }
    label { font-size: 13px; gap: 6px; }
    input, select, textarea { font-size: 16px; min-height: 46px; padding: 11px 14px; border-radius: 12px; }
    .champ-plein { margin-bottom: 20px; }
    .navigation-etapes .bouton { min-height: 46px; }
    .message-apercu { max-height: 240px; padding: 14px 16px; font-size: 13.5px; margin-bottom: 16px; }
    .envoi-boutons { grid-template-columns: 1fr; gap: 8px; }
    .envoi-bouton { padding: 13px 10px; font-size: 12px; }
    .faq summary { font-size: 17px; min-height: 44px; padding: 14px 40px 14px 0; }
    .faq p { font-size: 14px; }

    /* --- Photos carrées et pied de page --- */
    .carres { gap: 3px; padding-top: 14px; }
    .pied { padding: 32px 0 20px; }
    .pied-grille { padding: 0 var(--marge); grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 20px; }
    /* Logo à gauche, réseaux à droite, la phrase en dessous du logo */
    .pied-marque { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(0,0,0,.1); }
    .pied-logo-bloc { display: contents; }
    .pied-logo { grid-column: 1; grid-row: 1; justify-self: start; }
    .pied-socials { grid-column: 2; grid-row: 1; justify-self: end; margin-right: -12px; }
    .pied-tagline { grid-column: 1 / -1; grid-row: 2; width: auto; white-space: nowrap; text-align: left; text-align-last: auto; }
    .pied-baseline { grid-column: 1 / -1; grid-row: 3; }
    .pied-logo { height: 88px; margin-bottom: 6px; }
    .pied-tagline { font-size: 11px; }
    .pied-baseline { font-size: 16px; margin-bottom: 4px; }
    .pied-socials { gap: 2px; }
    .pied-social { width: 44px; height: 44px; align-items: center; justify-content: center; }
    .pied-social svg { width: 20px; height: 20px; }
    .pied-titre { font-size: 12px; margin-bottom: 4px; }
    .pied-col a { font-size: 16px; margin: 0; padding: 5px 0; }
    .pied-bas { margin-top: 20px; padding: 14px var(--marge) 0; flex-direction: column-reverse; gap: 6px; text-align: center; }
    .pied-bas-liens { flex-wrap: wrap; justify-content: center; gap: 0 18px; }
    .pied-bas-liens a { font-size: 14px; padding: 6px 0; }
    .pied-copy { font-size: 13px; }
}

/* Sous-titres rouges en capitales : sur une seule ligne (il n'aime pas une phrase de titre coupée).
   Leur taille suit la largeur de l'écran ; diviseurs mesurés sur la phrase la plus longue de chaque bloc. */
@media (max-width: 640px) {
    .sincere-titre-2, .offre-titre .sincere-titre-2, .plus-titre .sincere-titre-2 { white-space: nowrap; text-wrap: nowrap; }
    .sincere .sincere-titre-2 { font-size: min(22px, calc((100vw - 2 * var(--marge)) / 18)); }
    .offre-titre .sincere-titre-2 { font-size: min(22px, calc((100vw - 2 * var(--marge)) / 19)); }
    .plus-titre .sincere-titre-2 { font-size: min(20px, calc((100vw - 2 * var(--marge)) / 23)); }
}
/* Menu plein écran : l'en-tête ne doit jamais être décalé quand le menu est ouvert,
   sinon le menu (fixé à l'intérieur de l'en-tête) suit le décalage et sort de l'écran */
@media (max-width: 960px) {
    .entete.menu-ouvert { transform: none; }
    .pied-social { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
    /* Le bouton « Réserver ma date » du menu : texte rouge sur fond blanc (il était blanc sur blanc) */
    .nav a.nav-cta { color: var(--rouge) !important; display: inline-flex; align-items: center; min-height: 52px; }
}

@media (max-width: 640px) {
    /* « L'histoire a commencé, » sur une seule ligne (diviseur mesuré : 11,3) */
    .bio-titre h2 { white-space: nowrap; font-size: min(34px, calc((100vw - 2 * var(--marge)) / 11.8)); }
    /* Bandeaux photo + texte : tout centré, bouton sur toute la largeur */
    .pret-texte p { text-align: center; }
    .pret .bouton-carre-blanc { align-self: stretch; }
    /* Le trait au-dessus du contenu d'une formule prend toute la largeur de la carte */
    .carte-choix-inclus { width: 100%; }
    /* Petites étiquettes en capitales : 12 px minimum sur téléphone */
    .pied-tagline, .formule-badge, .detail-titre { font-size: 12px; }
    .pied-tagline { letter-spacing: 0; }
    .contact-carte a { padding: 8px 0; }
}
@media (max-width: 360px) {
    .plus-titre .sincere-titre-2 { white-space: normal; text-wrap: balance; font-size: 16px; }
}

/* Très petits écrans (320 px) : on resserre encore un peu */
@media (max-width: 360px) {
    :root { --marge: 16px; }
    .formule-actions { flex-direction: column; }
    .formule-voir, .formule-choisir { width: 100%; }
    .fiche-infos { grid-template-columns: 1fr; }
}

/* Écrans tactiles : pas d'effets de survol qui restent « collés » après un toucher */
@media (hover: none) {
    .case:hover, .carre:hover { transform: none; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); }
    .case:hover img, .carre:hover img, .hr-ligne:hover .hr-principale img { transform: none; }
    .case:hover::after, .carre:hover::after { transform: translateX(-110%); }
    .plus-option:hover { background: var(--blanc); border-color: var(--rose-doux); }
    .plus-option:hover h3, .plus-option:hover .plus-fleur { color: inherit; }
    .plus-option:hover .plus-fleur { color: var(--rouge); }
    .plus-option:hover .plus-note { color: var(--texte-doux); }
    .carte-choix:hover:not(.choisi) { background: var(--blanc); border-color: var(--rose-doux); color: var(--texte); }
    .carte-choix:hover:not(.choisi) .carte-choix-sous { color: var(--texte-doux); }
    .carte-choix:hover:not(.choisi) .carte-choix-inclus { color: var(--texte); border-color: var(--rose-doux); }
    .carte-choix:hover:not(.choisi) .carte-choix-inclus li::before { color: var(--rouge); }
}

/* Tablette (641 à 960 px) : une colonne comme sur téléphone, mais des photos en paysage
   pour qu'aucune n'occupe plus d'un écran */
@media (min-width: 641px) and (max-width: 960px) {
    .histoire-bloc-photo, .bio-photo, .offre-photo { height: auto; aspect-ratio: 4 / 3; }
    .bio-photo img { height: 100%; top: 0; }
    .sincere-photo { height: auto; aspect-ratio: 16 / 10; }
    .plus-photo, .pret-image { height: auto; aspect-ratio: 16 / 9; }
    .pret-voile { display: none; }
    .contact-visuel { min-height: 0; aspect-ratio: 16 / 9; }
    .offre-photo img, .plus-photo img { object-position: center 30%; }
    .formule { display: flex; flex-direction: column; }
    .formule-milieu { display: contents; }
    .formule-haut { order: 1; } .formule-intro { order: 2; } .formule-details { order: 3; }
    .formule-actions { order: 4; margin-top: 14px; }
    .formule-voir, .formule-choisir { min-height: 44px; display: inline-flex; align-items: center; }
    .formule-detail { order: 5; }
    .formule-voir, .formule-choisir, .formule-badge, .detail-titre { font-size: 12px; }
    .lien-fleche, .pied-bas-liens a { display: inline-block; padding: 8px 0; }
}

/* ==========================================================
   Pages légales et page 404 (ajoutées le 29/10)
   ========================================================== */
.page-legale { max-width: 860px; margin: 0 auto; padding: clamp(60px, 8vw, 110px) var(--marge) clamp(70px, 9vw, 120px); }
.page-legale h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 14px; }
.page-legale-maj { color: var(--texte-doux); font-size: 14px; margin: 0 0 30px; }
.page-legale h2 { font-size: clamp(24px, 2.4vw, 30px); margin: 44px 0 14px; color: var(--rouge-profond); }
.page-legale p, .page-legale li { color: var(--texte); }
.page-legale ul { padding-left: 20px; }
.page-legale li { margin: 6px 0; }
.page-legale a { color: var(--rouge); }
.a-completer { background: var(--rose-pale); color: var(--rouge-profond); border: 1px dashed var(--rouge); padding: 0 6px; border-radius: 4px; }
.page-404-liens { display: flex; flex-wrap: wrap; gap: 0 16px; margin-top: 10px; }
@media (max-width: 640px) {
    .page-legale h1 { font-size: 30px; }
    .page-legale h2 { font-size: 22px; margin-top: 32px; }
    .page-legale p, .page-legale li { font-size: 15px; }
    .page-404-liens .bouton-carre { width: 100%; text-align: center; margin-top: 14px; }
}