/* ==========================================================================
   Eventino — style.css
   Colors sourced from /source/elementor_15.json (widget settings) and
   /source/post-15.css (compiled Elementor rules). See BUILD_NOTES.txt.
   ========================================================================== */

:root{
  --blue:#3164DA;          /* unified with header nav blue (was #2F62AC) — one blue across the whole site */
  --blue-alt:#3164DA;       /* same blue as --blue, kept as an alias for existing rules */
  --blue-deep:#243753;      /* dark blue, footer / deep shade, seen in elementor_15.json colors */
  --blue-dark2:#1B252F;     /* darkest tone found in json colors, footer fallback */
  --gold:#FFD04D;           /* global-color-accent, price_color, buttons */
  --gold-soft:#FFF3D3;      /* light gold tint found in json */
  --gold-soft2:#FDE5A0;     /* light gold tint found in json */
  --text-dark:#324A6D;      /* dark blue-grey text color found repeatedly in post-15.css */
  --off-white:#F9FAFD;      /* light section background (container 527129d2/0a9d195) */
  --white:#FFFFFF;
  --grey-line:#c4c4c4;
  --font-heading:'Montserrat',sans-serif;
  --font-button:'Archivo',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-heading);color:var(--text-dark);background:var(--white);line-height:1.65;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
.container{width:75%;max-width:1400px;margin:0 auto;padding:0;box-sizing:border-box;}
h1,h2,h3,h4{font-weight:700;line-height:1.2;font-family:var(--font-heading);}

/* ---------------------------------------------------------------- NAV --- */
header.site-nav{
  position:sticky;top:0;z-index:100;
  background:var(--blue-alt);
  padding:18px 0;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:75%;max-width:1400px;margin:0 auto;padding:0;gap:20px;box-sizing:border-box;}
.logo img{height:73px;}
nav.menu ul{display:flex;gap:34px;}
/* Survol des liens du menu : même technique de remplissage diagonal que
   ".who-grid li .li-text" ("Diag A") — un aplat doré se déploie en
   diagonale (coin bas-gauche vers coin haut-droit) juste derrière
   l'écriture, qui passe simultanément du doré au bleu au-dessus de ce
   fond. position:relative + isolation:isolate + z-index:-1 sur le
   pseudo-élément permettent au fond de rester strictement derrière le
   texte du lien, sans span supplémentaire ni script. */
nav.menu a{position:relative;display:inline-block;isolation:isolate;
  color:var(--gold);font-weight:600;font-size:15px;letter-spacing:.3px;
  padding:2px 6px;transition:color .35s ease;}
nav.menu a::before{content:'';position:absolute;inset:-2px -6px;background:var(--gold);
  clip-path:polygon(0% 100%,0% 100%,0% 100%,0% 100%);
  transition:clip-path .5s cubic-bezier(.65,0,.35,1);z-index:-1;}
nav.menu a:hover{color:var(--blue);}
nav.menu a:hover::before{clip-path:polygon(0% 100%,0% 0%,100% 0%,100% 100%);}
@media(prefers-reduced-motion:reduce){
  nav.menu a::before{transition:none;}
}
.btn-contact{
  position:relative;overflow:hidden;isolation:isolate;
  background:transparent;color:var(--gold);font-weight:800;padding:10px 28px;
  border-radius:0;font-size:15px;letter-spacing:.3px;border:1px solid var(--gold);
  cursor:pointer;transition:color .35s ease;font-family:var(--font-button);
  text-transform:uppercase;
}
/* Remplissage diagonal au survol : les 4 points du polygone partent
   collés au coin bas-gauche puis rejoignent exactement les 4 coins du
   bouton — la forme finale EST le rectangle complet, donc la couverture
   totale est garantie (pas juste approchée par un panneau qui glisse).
   z-index:-1 place le remplissage SOUS le texte du bouton sans avoir
   besoin d'un <span> englobant — utile ici car le libellé est réinjecté
   dynamiquement via data-key/innerHTML par script.js, ce qui écraserait
   tout wrapper statique posé dans le HTML. */
.btn-contact::before{
  content:'';position:absolute;inset:0;background:var(--gold);
  clip-path:polygon(0% 100%,0% 100%,0% 100%,0% 100%);
  transition:clip-path .5s cubic-bezier(.65,0,.35,1);z-index:-1;
}
.btn-contact:hover::before{clip-path:polygon(0% 100%,0% 0%,100% 0%,100% 100%);}
.btn-contact:hover{color:var(--blue);}
.burger{display:none;background:none;border:none;color:#fff;font-size:28px;cursor:pointer;}

/* --------------------------------------------------------------- HERO --- */
.hero{
  position:relative;height:100vh;min-height:560px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;background:var(--blue-alt);
}
.hero-slides{position:absolute;inset:0;}
.hero-slides .slide{
  position:absolute;inset:0;background-size:cover;background-position:bottom center;
  opacity:0;transition:opacity 1.8s ease-in-out;
}
.hero-slides .slide.active{opacity:1;}
/* Gradient at the bottom of the photo fades into the SAME blue as the
   "Citation" section right below it (--blue-alt #3164DA), so the two
   stacked 100vh sections blend seamlessly with no visible seam. */
.hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, #3164DA00 0%, var(--blue-alt) 92%);
  pointer-events:none;
}
.hero-content{position:relative;z-index:2;color:#fff;}
.hero-content img.wordmark{width:40vw;max-width:900px;margin:0 auto;}

/* Separate full-height "Citation" section below the photo slider —
   elementor_15.json container 093f681: solid background_color #3164DA
   (--blue-alt, NOT the main --blue), min-height 100vh, centered, containing
   only the "créateur de souvenirs [mot qui défile]" fancy-heading widget
   (71px desktop / 32px mobile, Montserrat 700 uppercase, color accent/gold,
   _animation fadeInDown delay 100ms). This is a distinct section from the
   photo hero above it, not overlaid text on the photo. */
.hero-quote{
  min-height:100vh;padding:60px 20px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--blue-alt);
}
.hero-strap{font-size:71px;font-weight:700;color:var(--gold);text-transform:uppercase;
  line-height:1.15;letter-spacing:.5px;max-width:1100px;}
.hero-prefix{display:block;margin-bottom:4px;}
.hero-strap .cursor{display:inline-block;margin-left:2px;animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}

section{padding:90px 0;}
.section-blue{background:var(--blue);color:#fff;}
.section-yellow{background:var(--gold);color:var(--blue);}
.eyebrow{color:var(--gold);font-weight:600;letter-spacing:2px;font-size:15px;margin-bottom:8px;text-transform:uppercase;}
.eyebrow.center{text-align:center;font-size:16px;}
.section-blue .eyebrow{opacity:.9;}
h2.title{font-size:38px;margin-bottom:18px;}

/* ------------------------------------------------------- SCROLL ANIM ---
   Elements start well outside the viewport (not just a small nudge) and
   glide into place as they scroll into view, mirroring the "arrival"
   feel of the original site's Elementor entrance animations. */
[data-anim]{
  opacity:0;transform:translateY(90px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
[data-anim="fadeIn"]{transform:none;}
[data-anim="fadeInLeft"]{transform:translateX(-140px);}
[data-anim="fadeInRight"]{transform:translateX(140px);}
[data-anim="fadeInDown"]{transform:translateY(-90px);}
[data-anim].in-view{opacity:1;transform:translate(0,0);}
@media(max-width:767px){
  /* Keep horizontal travel inside the (narrower) viewport on mobile so
     elements don't overshoot into visible whitespace off to the side. */
  [data-anim="fadeInLeft"]{transform:translateX(-60px);}
  [data-anim="fadeInRight"]{transform:translateX(60px);}
}

/* ---------------------------------------------------------- QUI SUIS-JE - */
/* gap : 60px -> 66px (+10%) -> 96px, pour aérer nettement plus le texte et la photo.
   align-items:stretch (au lieu de start) : la colonne photo prend désormais
   la même hauteur que la colonne texte (la plus haute des deux définit la
   hauteur de la ligne de grille), la photo est recadrée dedans (voir
   .who-grid .photo img, object-fit:cover) au lieu de garder sa hauteur
   naturelle. */
.who-grid{display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:stretch;}
.who-grid h2{color:var(--blue);font-size:32px;margin-bottom:18px;text-transform:uppercase;}
.who-grid p{margin-bottom:16px;color:#3d4460;}
.who-grid h3{color:var(--blue);font-size:22px;margin:26px 0 14px;text-transform:uppercase;}
/* Liste "Mes réalisations" : taille de police -15% (14px -> 11.9px). */
.who-grid li{position:relative;padding-left:30px;margin-bottom:6px;color:#3d4460;font-size:11.9px;line-height:1.3;}
.who-grid li::before{content:'';position:absolute;left:0;top:6px;width:16px;height:3px;background:var(--gold);}
/* Au survol, l'animation ne touche plus toute la ligne : seul le texte
   reçoit un remplissage doré en diagonale (même technique que les boutons
   "Diag A"), qui se déploie derrière l'écriture puis fait passer le texte
   en bleu. .li-text isole le pseudo-élément (isolation + z-index:-1) pour
   qu'il reste derrière le texte sans wrapper supplémentaire ni script. */
.who-grid li .li-text{position:relative;display:inline-block;isolation:isolate;
  transition:color .35s ease;}
.who-grid li .li-text::before{content:'';position:absolute;inset:-1px -4px;background:var(--gold);
  clip-path:polygon(0% 100%,0% 100%,0% 100%,0% 100%);
  transition:clip-path .5s cubic-bezier(.65,0,.35,1);z-index:-1;}
.who-grid li:hover .li-text{color:var(--blue);}
.who-grid li:hover .li-text::before{clip-path:polygon(0% 100%,0% 0%,100% 0%,100% 100%);}
@media(prefers-reduced-motion:reduce){
  .who-grid li .li-text::before{transition:none;}
}
/* overflow:hidden (au lieu de visible) : nécessaire maintenant que la photo
   est recadrée à la hauteur du texte, pour que le recadrage (object-fit)
   et le zoom/pan de l'animation restent dans le cadre plutôt que de
   déborder sur la mise en page. */
.who-grid .photo{overflow:hidden;border-radius:0;height:100%;}
/* Photo "Qui suis-je ?" : mixte proposition C (arrivée floue/assombrie qui
   se stabilise nette, une seule fois) + proposition E (léger zoom/pan
   continu piloté par le scroll), en plus de la parallaxe souris existante.
   Les 3 effets pilotent des custom properties distinctes (--mx/--my,
   --kbs/--kbx) composées dans un seul transform, donc sans conflit.
   Amplitudes accentuées de +20% (voir aussi MAX_OFFSET et le calcul de
   --kbs/--kbx dans script.js) ; la valeur de base de --kbs est également
   relevée (1.06 -> 1.12) pour garder une marge de recadrage suffisante
   maintenant que le cadre est fermé (overflow:hidden) et ne doit jamais
   laisser apparaître de bord vide pendant le pan. */
.who-grid .photo img{width:100%;height:100%;object-fit:cover;object-position:center;
  border-radius:0;will-change:transform,filter;
  transform:translate(var(--mx,0px),var(--my,0px)) scale(var(--kbs,1.12)) translateX(var(--kbx,0px));
  filter:blur(6px) brightness(.82);
  transition:transform .2s cubic-bezier(.22,.61,.36,1),filter 1.1s cubic-bezier(.22,.61,.36,1);}
.who-grid .photo.in-view img{filter:blur(0) brightness(1);}
@media(prefers-reduced-motion:reduce){
  .who-grid .photo img{transition:filter 1.1s cubic-bezier(.22,.61,.36,1);}
}

/* ---------------------------------------------------------- PRESTATIONS - */
.service-block{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:stretch;padding:110px 0;}
.service-block:first-child{padding-top:70px;}
.service-block:last-child{padding-bottom:70px;}
.service-block.reverse .service-text{order:2;}
.service-block.reverse .service-media{order:1;}
.service-text{display:flex;flex-direction:column;justify-content:center;min-height:0;min-width:0;}
.service-text h2{font-size:58px;font-weight:700;line-height:1.15;color:var(--gold);margin-bottom:16px;text-transform:uppercase;}
.service-text p{margin-bottom:22px;color:#eef1fb;}
.service-list{margin-bottom:22px;}
.service-list li{position:relative;padding-left:26px;margin-bottom:10px;font-weight:600;}
.service-list li::before{content:'—';position:absolute;left:0;color:var(--gold);}

/* Photo mosaics: each service gets its own layout so the 3 photos read as a
   varied mix of portrait/landscape crops and sizes rather than a repeated
   template. Height is driven by the grid row (align-items:stretch above),
   so the mosaic always matches the height of the text column beside it. */
.service-media{display:grid;gap:16px;height:100%;min-height:0;overflow:hidden;}
.service-media img{border-radius:0;width:100%;height:100%;object-fit:cover;min-height:0;min-width:0;display:block;}

/* mosaic-1 (mariages): wide landscape banner on top, two squarer portraits
   below it. */
.service-media.mosaic-1{grid-template-columns:1fr 1fr;grid-template-rows:1.3fr 1fr;}
.service-media.mosaic-1 img:nth-child(1){grid-column:1 / 3;grid-row:1;}
.service-media.mosaic-1 img:nth-child(2){grid-column:1;grid-row:2;}
.service-media.mosaic-1 img:nth-child(3){grid-column:2;grid-row:2;}

/* mosaic-2 (anniversaires): tall portrait on one side, two landscapes
   stacked on the other. */
.service-media.mosaic-2{grid-template-columns:1fr 1.3fr;grid-template-rows:1fr 1fr;}
.service-media.mosaic-2 img:nth-child(1){grid-column:1;grid-row:1 / 3;}
.service-media.mosaic-2 img:nth-child(2){grid-column:2;grid-row:1;}
.service-media.mosaic-2 img:nth-child(3){grid-column:2;grid-row:2;}
.service-block.reverse .service-media.mosaic-2{grid-template-columns:1.3fr 1fr;}
.service-block.reverse .service-media.mosaic-2 img:nth-child(1){grid-column:2;grid-row:1 / 3;}
.service-block.reverse .service-media.mosaic-2 img:nth-child(2){grid-column:1;grid-row:1;}
.service-block.reverse .service-media.mosaic-2 img:nth-child(3){grid-column:1;grid-row:2;}

/* mosaic-3 (séminaires): two landscapes stacked on one side, tall portrait
   on the other — mirror of mosaic-2 for visual variety. */
.service-media.mosaic-3{grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr;}
.service-media.mosaic-3 img:nth-child(1){grid-column:1;grid-row:1;}
.service-media.mosaic-3 img:nth-child(2){grid-column:1;grid-row:2;}
.service-media.mosaic-3 img:nth-child(3){grid-column:2;grid-row:1 / 3;}
.service-block.reverse .service-media.mosaic-3{grid-template-columns:1fr 1.3fr;}
.service-block.reverse .service-media.mosaic-3 img:nth-child(1){grid-column:2;grid-row:1;}
.service-block.reverse .service-media.mosaic-3 img:nth-child(2){grid-column:2;grid-row:2;}
.service-block.reverse .service-media.mosaic-3 img:nth-child(3){grid-column:1;grid-row:1 / 3;}

/* Photo entrance animation: each photo pops in with a slight scale in
   addition to the direction it's assigned in script.js (up/left/right),
   for a livelier "arrival" feel than the plain fade used elsewhere.
   Amplitude accentuée (distance de translation + zoom de départ plus
   marqués, durée légèrement plus longue) pour une arrivée plus visible. */
.service-media img[data-anim]{transform:translateY(120px) scale(.82);transition:opacity 1.3s cubic-bezier(.22,.61,.36,1),transform 1.3s cubic-bezier(.22,.61,.36,1);}
.service-media img[data-anim="fadeInLeft"]{transform:translateX(-150px) scale(.82);}
.service-media img[data-anim="fadeInRight"]{transform:translateX(150px) scale(.82);}
.service-media img[data-anim].in-view{transform:translate(0,0) scale(1);}

/* Même traitement (translation plus ample + zoom de départ) appliqué à
   toutes les autres images à animation d'entrée du site (photo officiant,
   photo de contact...), pour une arrivée des images cohérente et plus
   marquée partout, pas seulement dans les mosaïques Prestations. */
img[data-anim]{transform:translateY(120px) scale(.82);transition:opacity 1.3s cubic-bezier(.22,.61,.36,1),transform 1.3s cubic-bezier(.22,.61,.36,1);}
img[data-anim="fadeInLeft"]{transform:translateX(-150px) scale(.82);}
img[data-anim="fadeInRight"]{transform:translateX(150px) scale(.82);}
img[data-anim].in-view{transform:translate(0,0) scale(1);}
.contact-photo[data-anim]{transform:translateX(-150px) scale(.85);transition:opacity 1.3s cubic-bezier(.22,.61,.36,1),transform 1.3s cubic-bezier(.22,.61,.36,1);}
.contact-photo[data-anim].in-view{transform:translate(0,0) scale(1);}
.btn-outline{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-block;align-self:flex-start;margin-top:10px;background:transparent;color:var(--gold);font-weight:800;
  padding:10px 32px;border-radius:0;font-size:14px;text-transform:uppercase;font-family:var(--font-button);
  border:1px solid var(--gold);transition:color .35s ease;
}
.btn-outline::before{
  content:'';position:absolute;inset:0;background:var(--gold);
  clip-path:polygon(0% 100%,0% 100%,0% 100%,0% 100%);
  transition:clip-path .5s cubic-bezier(.65,0,.35,1);z-index:-1;
}
.btn-outline:hover::before{clip-path:polygon(0% 100%,0% 0%,100% 0%,100% 100%);}
.btn-outline:hover{color:var(--blue);}

/* -------------------------------------------------------------- GALLERY - */
.gallery-section{padding:90px 0;}
.gallery{column-count:4;column-gap:16px;}
.gallery img{width:100%;margin-bottom:16px;border-radius:0;break-inside:avoid;}
@media(max-width:900px){.gallery{column-count:2;}}

/* ----------------------------------------------------------- ACTUALITÉS - */
/* Bandeau défilant (carrousel horizontal) sur le même bleu que le reste du
   site (tarifs, prestations, témoignages), dans le même esprit que le
   carrousel des témoignages : titre + règle dorée à gauche, flèches de
   navigation à droite, cartes qui défilent horizontalement. */
.section-actualites{padding:90px 0 96px;background:var(--blue);}
.actu-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:34px;gap:20px;}
.actu-title{font-size:34px;color:#fff;margin-bottom:10px;text-transform:uppercase;}
.actu-rule{width:120px;height:5px;background:var(--gold);}
.actu-nav{display:flex;gap:10px;flex-shrink:0;}
.actu-nav button{width:42px;height:42px;border-radius:0;border:1px solid rgba(255,255,255,.35);background:transparent;
  color:#fff;font-size:19px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s;}
.actu-nav button:hover{background:rgba(255,255,255,.12);border-color:var(--gold);}
.actu-nav button[hidden]{display:none;}

/* .actu-track-wrap porte maintenant la classe .container (même largeur/
   centrage que le reste du site, cf. règle .container plus haut) — les
   cartes s'alignent donc naturellement sur le même inset que le titre
   (.actu-head) et tous les autres blocs du site, sans calcul JS.
   overflow-x:hidden ici sert de fenêtre de découpe STRICTE : .actu-track-wrap
   lui-même n'a pas de padding propre (celui de .container est nul sur
   desktop), donc la découpe tombe pile au bord du conteneur — plus de
   carte suivante qui dépasse/déborde à droite, seules les cartes qui
   tiennent entièrement dans la largeur sont visibles.
   Le VRAI scroll (roulette/tactile) se fait sur .actu-scroll, à l'intérieur :
   comme il est enfant de ce conteneur découpé, il continue de défiler
   normalement (y compris via les flèches, scrollBy en JS) même si son
   ancêtre est en overflow:hidden.
   La largeur exacte de la fenêtre de découpe (assez pour 4 cartes pile,
   jamais plus/moins) est calculée en JS (voir syncVisibleWidth() dans
   script.js) et posée en style inline sur cet élément : un simple % CSS
   ne peut pas tomber pile sur "4 cartes de largeur fixe + marge pour le
   liseré" à toutes les tailles d'écran (au mieux ça coïncide par hasard
   à UNE largeur de fenêtre précise, et déborde ou rogne une carte à
   toutes les autres). */
.actu-track-wrap{overflow-x:hidden;}

.actu-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:6px;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scroll-snap-type:x proximity;}
.actu-scroll::-webkit-scrollbar{height:6px;}
.actu-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:0;}

.actu-grid{display:flex;gap:24px;}
/* Même langage graphique que les cartes tarifs (.pack) : angles carrés,
   contour doré, fond identique à la section (le contour + la photo
   suffisent à détacher la carte).
   IMPORTANT : un seul mécanisme de contour est utilisé (les 8 .half
   ci-dessous) — pas de propriété "border" native en plus, sinon les deux
   se superposent légèrement décalés et donnent l'impression de 2 liserés
   (un jaune pâle dehors, un plus sombre dedans). .actu-card n'a donc
   volontairement PAS de border : sans elle, le "padding-box" (où
   s'ancrent les .half en position:absolute, top/left/right/bottom:0)
   coïncide exactement avec le bord extérieur réel de la carte. */
.actu-card{flex:0 0 300px;scroll-snap-align:start;background:var(--blue);position:relative;
  border-radius:0;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .25s;}
.actu-card:hover{transform:translateY(-4px);}
/* Trait qui se déploie des 4 coins vers le centre de chaque côté (modèle
   "J" validé) : 8 petits éléments .half, un par demi-côté, ancrés à leur
   coin d'origine (transform-origin) et mis à l'échelle de 0 à 1 au survol.
   Un seul liseré jaune fin (2px), sans double contour ni halo — les
   demi-côtés l-t/l-b et r-t/r-b font chacun 50% de la hauteur TOTALE de
   la carte, donc ils dépassent largement la photo (190px) et rejoignent
   le bas de la carte : le haut, la gauche et la droite de la photo sont
   donc bien inclus dans une seule et même grande boîte avec le corps du
   texte, pas une boîte séparée.
   z-index:1 est nécessaire : au survol, .actu-card:hover img applique un
   transform (zoom léger), ce qui crée un nouveau contexte d'empilement pour
   l'image ; sans z-index explicite sur .half, ce contexte d'empilement de
   l'image passe AU-DESSUS des .half positionnés en absolute (même z-index
   "auto"), ce qui masquait le trait doré du haut (et une partie des traits
   gauche/droite) juste pendant le survol — donc juste quand on veut le voir. */
.actu-card .half{position:absolute;z-index:1;background:var(--gold);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);pointer-events:none;}
.actu-card .half.t-l{top:0;left:0;width:50%;height:2px;transform-origin:left;transform:scaleX(0);}
.actu-card .half.t-r{top:0;right:0;width:50%;height:2px;transform-origin:right;transform:scaleX(0);}
.actu-card .half.b-l{bottom:0;left:0;width:50%;height:2px;transform-origin:left;transform:scaleX(0);}
.actu-card .half.b-r{bottom:0;right:0;width:50%;height:2px;transform-origin:right;transform:scaleX(0);}
.actu-card .half.l-t{left:0;top:0;width:2px;height:50%;transform-origin:top;transform:scaleY(0);}
.actu-card .half.l-b{left:0;bottom:0;width:2px;height:50%;transform-origin:bottom;transform:scaleY(0);}
.actu-card .half.r-t{right:0;top:0;width:2px;height:50%;transform-origin:top;transform:scaleY(0);}
.actu-card .half.r-b{right:0;bottom:0;width:2px;height:50%;transform-origin:bottom;transform:scaleY(0);}
.actu-card:hover .half{transform:scale(1);}
@media(prefers-reduced-motion:reduce){
  .actu-card .half{transition:none;}
}
.actu-card > a{display:block;}
.actu-card img{width:100%;height:190px;object-fit:cover;display:block;transition:transform .4s;}
.actu-card:hover img{transform:scale(1.05);}
.actu-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1;}
.actu-body h3{font-size:17px;color:#fff;margin-bottom:8px;line-height:1.35;}
.actu-body h3 a{color:inherit;text-decoration:none;}
.actu-body h3 a:hover{text-decoration:underline;}
.actu-body time{font-size:11px;color:var(--gold-soft);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;display:block;}
.actu-body .excerpt{font-size:13px;color:#aebadb;line-height:1.6;flex:1;margin-bottom:14px;}
.actu-readmore{align-self:flex-start;color:var(--gold);font-weight:700;text-transform:uppercase;
  font-size:12px;letter-spacing:.5px;text-decoration:none;font-family:inherit;}
.actu-readmore::after{content:'\2192';margin-left:5px;transition:margin-left .2s;display:inline-block;}
.actu-readmore:hover::after{margin-left:11px;}

@media(max-width:700px){
  .actu-head{align-items:center;}
  .actu-title{font-size:24px;}
  /* Une seule actualité visible à la fois sur mobile (comme sur desktop,
     mais 1 carte au lieu de 4) : elle occupe toute la largeur de la fenêtre
     de découpe, la navigation se fait via les boutons prev/next. */
  .actu-card{flex:0 0 100%;}
}

/* --------------------------------------------------------- ARTICLE PAGE - */
.article-hero{position:relative;min-height:440px;background-size:cover;background-position:center;
  background-color:var(--blue);display:flex;align-items:flex-end;padding:0;}
.article-hero-overlay{width:100%;background:linear-gradient(180deg, rgba(20,26,40,0) 0%, rgba(20,26,40,.88) 100%);
  padding:160px 0 50px;}
.article-back{display:inline-block;color:var(--gold);font-weight:700;font-size:13px;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:18px;text-decoration:none;}
.article-back:hover{text-decoration:underline;}
.article-hero h1{color:#fff;font-size:44px;line-height:1.2;max-width:820px;margin-bottom:12px;text-transform:none;}
.article-hero .article-date{display:block;color:var(--gold-soft);font-size:13px;text-transform:uppercase;letter-spacing:.5px;}
@media(max-width:700px){.article-hero h1{font-size:28px;}.article-hero-overlay{padding:120px 0 40px;}}

.article-body-section{padding:70px 0 100px;}
.article-content{max-width:760px;margin:0 auto;font-size:16px;line-height:1.85;color:#243753;}
.article-content p{margin-bottom:18px;}
.article-content h2,.article-content h3,.article-content h4{color:var(--blue);margin:34px 0 14px;text-transform:none;line-height:1.3;}
.article-content ul,.article-content ol{margin:0 0 18px 22px;}
.article-content li{margin-bottom:8px;}
.article-content a{color:var(--blue);font-weight:600;text-decoration:underline;}
.article-content a.article-cta{color:#fff;text-decoration:none;}
.article-content a.article-cta:hover{color:var(--blue);}
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:36px 0 30px;}
.article-tag{background:#eaf1ff;color:var(--blue);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;padding:6px 14px;border-radius:0;}
.article-cta{display:inline-block;background:var(--blue);color:#fff;font-weight:800;padding:12px 34px;
  border-radius:0;font-size:14px;text-transform:uppercase;font-family:var(--font-button);
  border:1px solid var(--blue);transition:background .2s,color .2s;text-decoration:none;}
.article-cta:hover{background:#fff;color:var(--blue);}
.article-not-found{text-align:center;padding:40px 0;}

/* ---- Images insérées dans le corps d'un article via l'éditeur du
   backoffice (figure isolée avec légende/largeur/alignement, ou galerie
   en colonnes). Les classes w-25/w-33/w-50/w-66/w-100 et align-left/
   align-center/align-right sont posées automatiquement par l'éditeur. ---- */
.article-content figure.article-figure{margin:28px 0;clear:both;}
.article-content figure.article-figure img{width:100%;height:auto;display:block;border-radius:0;}
.article-content figure.article-figure figcaption{font-size:13px;color:#8892a3;margin-top:8px;text-align:center;}
.article-content figure.article-figure.w-25{width:25%;}
.article-content figure.article-figure.w-33{width:33.333%;}
.article-content figure.article-figure.w-50{width:50%;}
.article-content figure.article-figure.w-66{width:66.666%;}
.article-content figure.article-figure.w-100{
  width:min(1100px, 92vw);max-width:1100px;
  margin-left:calc(50% - min(550px, 46vw));margin-right:calc(50% - min(550px, 46vw));
}
.article-content figure.article-figure.align-center{margin-left:auto;margin-right:auto;float:none;}
.article-content figure.article-figure.align-left{float:left;margin:6px 28px 20px 0;}
.article-content figure.article-figure.align-right{float:right;margin:6px 0 20px 28px;}
.article-content figure.article-figure.w-100.align-left,
.article-content figure.article-figure.w-100.align-right{float:none;}
.article-content .article-gallery{display:grid;gap:16px;margin:30px 0;clear:both;}
.article-content .article-gallery.cols-2{grid-template-columns:repeat(2,1fr);}
.article-content .article-gallery.cols-3{grid-template-columns:repeat(3,1fr);}
.article-content .article-gallery.cols-4{grid-template-columns:repeat(4,1fr);}
.article-content .article-gallery figure{margin:0;}
.article-content .article-gallery img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block;border-radius:0;}
.article-content .article-gallery figcaption{font-size:12px;color:#8892a3;margin-top:6px;text-align:center;}
@media(max-width:700px){
  .article-content figure.article-figure.w-25,
  .article-content figure.article-figure.w-33,
  .article-content figure.article-figure.w-50,
  .article-content figure.article-figure.w-66{width:100%;float:none;margin:24px 0;}
  .article-content .article-gallery.cols-2,
  .article-content .article-gallery.cols-3,
  .article-content .article-gallery.cols-4{grid-template-columns:1fr 1fr;}
}
.article-not-found h1{color:var(--blue);margin-bottom:14px;}

/* -------------------------------------------------------------- PRICING - */
.pricing-head{text-align:center;margin-bottom:50px;}
/* "Prix des prestations" eyebrow — elementor_15.json widgets 70de645d/42a0242/
   3899cb0: font-weight 300 (light), text-transform none, 58-60px desktop /
   42px mobile. Overrides the blanket h1-h4{font-weight:700} rule below. */
.pricing-head .eyebrow2{
  color:var(--gold-soft);
  display:block;
  font-weight:300;
  font-size:58px;
  text-transform:none;
  letter-spacing:0;
  margin-bottom:4px;
}
/* Title ("organisation évènement" / "officiant de cérémonie") — elementor_15.json
   widgets 64bf506/e46e239: font-weight 700, uppercase, 58px desktop / 36px mobile
   (same size as the eyebrow above it, just bold+uppercase instead of light). */
.pricing-head h2{font-size:58px;line-height:1.15;color:var(--gold);text-transform:uppercase;margin:4px 0;}
/* Note ("(3 packs...)" / "(2 packs...)") — elementor_15.json widgets 5b76ce0/c0905f5:
   font-weight 700, uppercase, 38px desktop / 22px mobile — NOT the small body
   text size it was previously inheriting. */
.pricing-head .pack-note{display:block;font-size:38px;line-height:1.3;color:var(--gold);font-weight:700;margin-top:6px;text-transform:uppercase;}
.why-block{text-align:center;max-width:820px;margin:0 auto 60px;}
/* "Pourquoi me choisir ?" heading — elementor_15.json widgets 585ab45/…:
   font-weight 300 (light), text-transform none, 50px desktop / 42px mobile.
   Same override rationale as .eyebrow2 above. */
.why-block h3{
  color:var(--gold);
  font-weight:300;
  font-size:46.5px; /* 50px - 7%, per request */
  text-transform:none;
  margin-bottom:18px;
}
.why-block p{margin-bottom:10px;color:#e4e9fb;}
.pricing-grid{display:grid;gap:24px;}
.pricing-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.pricing-grid.cols-2{grid-template-columns:repeat(2,1fr);max-width:800px;margin:0 auto;}
.pack{border:2px solid var(--gold);padding:36px 30px;text-align:center;border-radius:0;background:var(--blue);
  display:flex;flex-direction:column;}
.pack.featured{background:var(--gold);color:var(--blue);border-color:var(--gold);}
.pack h4{font-size:20px;letter-spacing:1px;margin-bottom:6px;text-transform:uppercase;}
.pack .contrib{font-size:14px;opacity:.9;margin-bottom:2px;}
.pack .price{font-size:44px;font-weight:900;color:var(--gold);margin:18px 0 2px;}
.pack.featured .price{color:var(--blue);}
.pack .price small{font-size:16px;font-weight:500;display:block;color:#fff;opacity:.85;}
.pack.featured .price small{color:var(--blue);}
.pack ul{text-align:left;margin-top:22px;flex-grow:1;}
.pack li{position:relative;padding-left:26px;margin-bottom:10px;font-size:14px;font-weight:600;}
.pack li::before{content:'\2713';position:absolute;left:0;color:var(--gold);font-weight:800;}
.pack.featured li::before{color:var(--blue);}
/* Officiant pricing packs + photo, split into three equal 1/3 columns —
   the "Pourquoi me choisir ?" text now lives centered in .why-block above,
   matching the "organisation" pricing section right above it. The nested
   .pricing-grid.cols-2 is set to display:contents so its two .pack cards
   become direct grid items of .officiant-row, each taking one column,
   with the photo taking the third. */
.officiant-row{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;align-items:stretch;margin-top:20px;}
.officiant-row .pricing-grid.cols-2{display:contents;}
.officiant-photo{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:0;}

/* ---------------------------------------------------------------- VALUES - */
/* elementor_15.json containers fe91006 (mobile) / 20e5d74 (desktop/tablet):
   photo background (Tonino30-235-scaled.jpg) with a solid gold overlay at
   opacity .9 on top — NOT a flat solid color. min-height 100vh, centered. */
.section-values{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  color:var(--blue);
  background-image:linear-gradient(rgba(255,208,77,.9), rgba(255,208,77,.9)),
    url('uploads/Tonino30-235-scaled.jpg');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.values-wrap{display:flex;justify-content:space-between;align-items:center;gap:40px;width:100%;}
/* Left container (fb9486e/22ec406) — 40% width */
.values-left{width:40%;}
.values-left h2{
  font-family:var(--font-heading);font-weight:700;font-size:49px;line-height:1.2;
  color:var(--blue);margin-bottom:20px;text-transform:none;
}
.values-left p{
  font-family:var(--font-heading);font-weight:400;font-size:24px;line-height:28px;
  color:#FFFFFF;
}
/* Right container (37e4efc) — 60% width, right-aligned cycling text column.
   Widgets 855bb13 (blue), 950d2c0 (white), 62c7e78 (blue, smaller) each
   cycle through 3 words (see script.js renderValueGroups/startWordCycle). */
.values-right{width:60%;display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.value-cycle{font-family:var(--font-heading);font-weight:700;text-transform:uppercase;line-height:1.15;}
.value-cycle span{display:inline-block;transition:opacity .25s ease, transform .25s ease;}
.value-cycle span.cycling-out{opacity:0;transform:translateY(-10px);}
.value-cycle-1{font-size:71px;color:var(--blue);}
.value-cycle-2{font-size:71px;color:#FFFFFF;}
.value-cycle-3{font-size:59px;color:var(--blue);}
@media(max-width:900px){
  .values-wrap{flex-direction:column;align-items:flex-start;}
  .values-left,.values-right{width:100%;}
  .values-right{align-items:flex-start;text-align:left;}
  .values-left h2{font-size:36px;}
  .value-cycle-1,.value-cycle-2,.value-cycle-3{font-size:30px;}
}

/* ---------------------------------------------------------- TESTIMONIALS - */
.section-testimonials{background:#fff;}
.testi-title{text-align:center;font-size:34px;color:var(--blue);margin-bottom:10px;text-transform:uppercase;}
.testi-rule{width:120px;height:5px;background:var(--gold);margin:0 auto 50px;}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.testi-grid blockquote{font-style:italic;color:#3d4460;font-size:15px;margin-bottom:18px;}
.testi-grid .name{color:var(--blue);font-weight:700;font-style:italic;}
.testi-grid .meta{font-size:13px;color:#8892a3;}
.testi-grid .card{text-align:center;}

/* Testimonials carousel: pages of up to 3 cards each, one page visible at a
   time. Nav arrows / dots only render (via JS) when there's more than one
   page — with 3 or fewer testimonials it just looks like a static row. */
.testi-carousel{display:flex;align-items:center;gap:16px;}
.testi-viewport{overflow:hidden;flex:1;}
.testi-track{display:flex;transition:transform .45s cubic-bezier(.22,.61,.36,1);}
.testi-page{flex:0 0 100%;min-width:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.testi-nav{
  flex:0 0 auto;width:44px;height:44px;border-radius:0;border:1px solid #ccd4e8;
  background:transparent;color:var(--blue);font-size:22px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease;
}
.testi-nav:hover{background:var(--off-white);border-color:var(--gold);}
.testi-nav[hidden]{display:none;}
.testi-dots{display:flex;justify-content:center;gap:10px;margin-top:26px;}
.testi-dots[hidden]{display:none;}
.testi-dot{width:9px;height:9px;border-radius:0;background:#ccd4e8;border:none;cursor:pointer;padding:0;transition:background .2s ease;}
.testi-dot.active{background:var(--gold);}
@media(max-width:1024px){
  .testi-page{grid-template-columns:1fr;gap:24px;}
}
@media(max-width:600px){
  .testi-carousel{gap:6px;}
  .testi-nav{width:36px;height:36px;font-size:18px;}
}

/* -------------------------------------------------------------- CONTACT - */
.contact-wrap{display:grid;grid-template-columns:1fr 1.3fr;background:#fff;border-radius:0;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.15);}
.contact-photo{background-size:cover;background-position:center;min-height:520px;}
.contact-form{padding:50px;}
.contact-form h2{color:var(--gold);font-size:30px;margin-bottom:16px;}
.contact-form .info{color:var(--blue);font-weight:700;margin-bottom:4px;}
.contact-form .info.phone{margin-bottom:2px;}
.contact-form .info.email{margin-bottom:26px;color:#5a6ac9;font-weight:600;}
.contact-form input, .contact-form textarea{
  width:100%;border:none;border-bottom:1px solid var(--gold);padding:12px 4px;margin-bottom:22px;
  font-family:inherit;font-size:15px;color:var(--blue);background:transparent;outline:none;resize:vertical;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{color:#8892c9;}
.contact-form button{
  background:var(--gold);color:var(--blue);font-weight:800;padding:14px 40px;border:none;border-radius:0;
  font-size:15px;letter-spacing:.5px;cursor:pointer;text-transform:uppercase;font-family:var(--font-button);
  transition:background .2s,color .2s;
}
.contact-form button:hover{background:var(--blue);color:var(--gold);}
.form-confirm{margin-top:16px;color:#2b7a3d;font-weight:600;font-size:14px;}
.form-error{margin-top:16px;color:#b3261e;font-weight:600;font-size:14px;}
.form-privacy-note{margin-top:10px;font-size:12px;line-height:1.5;opacity:.75;}
.form-privacy-note a{color:inherit;text-decoration:underline;}

footer{background:var(--blue);color:#cfd6f7;padding:26px 0;font-size:14px;}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}
footer a{color:var(--gold);}

/* ------------------------------------------------------------ RESPONSIVE - */
@media(max-width:1024px){
  .container{width:100%;padding:0 24px;}
  .nav-inner{width:100%;padding:0 24px;}
  .who-grid,.service-block,.pricing-grid.cols-3,.pricing-grid.cols-2,.values-wrap,.testi-grid,.contact-wrap,.officiant-row{
    grid-template-columns:1fr;
  }
  /* Use padding-top/bottom only here (not the "padding:60px 0" shorthand) —
     .service-block shares its element with .container in the markup
     (<div class="container service-block">), and a shorthand would zero
     out the horizontal padding .container just set above, pinning the
     prestations text/photos flush against the screen edges on mobile. */
  .service-block{align-items:initial;padding-top:60px;padding-bottom:60px;}
  .service-block.reverse .service-text,.service-block.reverse .service-media{order:initial;}
  .service-media.mosaic-1,.service-media.mosaic-2,.service-media.mosaic-3,
  .service-block.reverse .service-media.mosaic-1,.service-block.reverse .service-media.mosaic-2,.service-block.reverse .service-media.mosaic-3{
    grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:320px;
  }
  .service-media img:nth-child(1){grid-column:1 / 3;grid-row:1;}
  .service-media img:nth-child(2){grid-column:1;grid-row:2;}
  .service-media img:nth-child(3){grid-column:2;grid-row:2;}
  .officiant-photo{max-width:100%;margin:0;min-height:260px;}
  .gallery{column-count:2;}
  .contact-photo{min-height:280px;}
  section{padding:60px 0;}
}
/* Sur mobile, le mosaïque 2x2 (héritée de la mise en page tablette ci-dessus)
   devient trop petite pour bien voir chaque photo. On passe à une pile
   verticale plein-largeur : chaque photo garde une belle hauteur lisible,
   dans l'ordre naturel de lecture, quel que soit le mosaïque d'origine
   (mosaic-1/2/3) ou le sens de la section (.reverse). */
@media(max-width:700px){
  .service-media.mosaic-1,.service-media.mosaic-2,.service-media.mosaic-3,
  .service-block.reverse .service-media.mosaic-1,
  .service-block.reverse .service-media.mosaic-2,
  .service-block.reverse .service-media.mosaic-3{
    display:flex;flex-direction:column;height:auto;gap:12px;
  }
  .service-media.mosaic-1 img,.service-media.mosaic-2 img,.service-media.mosaic-3 img,
  .service-block.reverse .service-media.mosaic-1 img,
  .service-block.reverse .service-media.mosaic-2 img,
  .service-block.reverse .service-media.mosaic-3 img{
    grid-column:auto;grid-row:auto;width:100%;height:230px;object-fit:cover;
  }
}
@media(max-width:767px){
  /* Marges gauche/droite mobile (ajustées, palier tablette = 24px) :
     .container porte tout le contenu du site (hero, prestations, tarifs,
     actualités, témoignages, contact...), .nav-inner la barre de nav. */
  .container{padding:0 32px;}
  .nav-inner{padding:0 32px;}
  nav.menu{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--blue);
    padding:20px 40px;
  }
  nav.menu.open{display:block;}
  nav.menu ul{flex-direction:column;gap:16px;}
  .burger{display:block;}
  .btn-contact{display:none;}
  .hero-strap{font-size:32px;}
  .hero-content img.wordmark{width:60%;}
  .hero-quote{min-height:60vh;padding:50px 20px;}
  .who-grid h2{font-size:26px;}
  .service-text h2{font-size:40px;}
  .pricing-head .eyebrow2{font-size:42px;}
  .pricing-head h2{font-size:36px;}
  .pricing-head .pack-note{font-size:22px;}
  .why-block h3{font-size:39px;} /* 42px - 7% */
}

/* ---------------------------------------------------------------- LIGHTBOX - */
img.lb-enabled{cursor:zoom-in;}
.lightbox-overlay{
  position:fixed;inset:0;z-index:1000;background:rgba(15,20,40,.92);
  display:flex;align-items:center;justify-content:center;padding:40px;
  opacity:0;visibility:hidden;transition:opacity .25s ease;
}
.lightbox-overlay.open{opacity:1;visibility:visible;}
.lightbox-overlay img{
  max-width:90vw;max-height:88vh;border-radius:0;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  transform:scale(.96);transition:transform .25s ease;
}
.lightbox-overlay.open img{transform:scale(1);}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:fixed;background:rgba(255,255,255,.12);border:none;color:#fff;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-radius:0;transition:background .2s ease;
}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.25);}
.lightbox-close{top:24px;right:24px;width:44px;height:44px;font-size:22px;}
.lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%);width:52px;height:52px;font-size:26px;}
.lightbox-prev{left:24px;}
.lightbox-next{right:24px;}
@media(max-width:767px){
  .lightbox-close{top:12px;right:12px;width:38px;height:38px;font-size:18px;}
  .lightbox-prev,.lightbox-next{width:42px;height:42px;font-size:20px;}
  .lightbox-prev{left:8px;}
  .lightbox-next{right:8px;}
}