/* =========================================================
   LES PHOTOS DE CHLOÉ — charte graphique
   Couleurs et typographies du cahier des charges.
   Modifier une valeur ici la change sur tout le site.
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..500&family=Inter:wght@300;400;500;600;700&display=swap");

:root{
  --creme:#F9F6F1;
  --encre:#2C2C2C;
  --terracotta:#C4785A;
  --menthe:#6B9080;
  --beige:#D8C9B8;
  --terracotta-fonce:#A55B3F;
  --menthe-foncee:#4E6E5F;
  --encre-2:#5A5652;
  --encre-3:#6F6862;
  --filet:#E5DACB;
  --filet-chaud:#C0B09B;
}

body{
  background:var(--creme);
  color:var(--encre);
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,
.elementor-heading-title{
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  font-weight:400;
  line-height:1.15;
  color:var(--encre);
  text-wrap:balance;
}
h1,.elementor-widget-heading h1.elementor-heading-title{font-size:clamp(2.1rem,5vw,3.1rem);font-weight:300}
h2,.elementor-widget-heading h2.elementor-heading-title{font-size:clamp(1.55rem,3.2vw,2.3rem)}
h3,.elementor-widget-heading h3.elementor-heading-title{font-size:1.15rem}
a{color:var(--terracotta-fonce)}
a:hover{color:var(--encre)}
:focus-visible{outline:2px solid var(--terracotta-fonce);outline-offset:3px}

.elementor-button{
  font-family:"Inter",sans-serif;
  font-size:.78rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.14em;
  border-radius:0;
  padding:13px 24px;
  border:1px solid var(--terracotta);
  background:var(--terracotta);
  color:#fff;
  transition:background .18s,border-color .18s,color .18s;
}
.elementor-button:hover{background:var(--terracotta-fonce);border-color:var(--terracotta-fonce);color:#fff}

.btn-discret .elementor-button{background:transparent;color:var(--encre-2);border-color:var(--filet-chaud)}
.btn-discret .elementor-button:hover{background:var(--menthe-foncee);border-color:var(--menthe-foncee);color:var(--creme)}

.btn-album .elementor-button{
  background:transparent;color:var(--encre-2);border-color:var(--filet-chaud);
  text-transform:none;letter-spacing:.01em;font-weight:500;font-size:.88rem;padding:11px 18px;
  width:100%;justify-content:center;text-align:center;
}
.btn-album .elementor-button:hover{background:var(--menthe-foncee);border-color:var(--menthe-foncee);color:var(--creme)}

.c-surtitre,.c-surtitre .elementor-heading-title{
  font-family:"Inter",sans-serif;
  font-size:.72rem;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.22em;
  color:var(--menthe-foncee);
  line-height:1.6;
}
.c-surtitre .elementor-heading-title::after{
  content:"";display:block;width:34px;height:2px;background:var(--menthe);margin-top:9px;
}
.c-surtitre.c-centre .elementor-heading-title::after{margin-left:auto;margin-right:auto}

.c-chapeau{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--encre-2);max-width:62ch}
.c-texte{max-width:64ch;color:var(--encre-2)}
.c-texte strong{color:var(--encre);font-weight:600}

.c-signature .elementor-heading-title,.c-signature{
  font-family:"Fraunces",Georgia,serif;
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.25rem,3vw,2rem);
  line-height:1.4;
  text-align:center;
  max-width:24ch;
  margin-inline:auto;
  color:var(--encre);
}

.c-avis{border-top:2px solid var(--menthe);padding-top:18px}
.c-avis .elementor-widget-container > p,.c-avis p{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:300;
  font-size:1.02rem;line-height:1.5;color:var(--encre);
}
.c-avis-source,.c-avis-source .elementor-heading-title{
  font-family:"Inter",sans-serif;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.15em;color:var(--encre-3);line-height:1.9;
}
.c-avis-source b,.c-avis-source strong{display:block;font-weight:500;color:var(--encre-2)}

.c-univers .elementor-widget-image img{transition:transform .5s ease}
.c-univers:hover .elementor-widget-image img{transform:scale(1.045)}
.c-univers .elementor-widget-heading .elementor-heading-title{font-size:1.02rem;transition:color .18s}
.c-univers:hover .elementor-widget-heading .elementor-heading-title{color:var(--terracotta-fonce)}
.c-legende,.c-legende .elementor-heading-title{
  font-family:"Inter",sans-serif;font-size:.78rem;color:var(--encre-3);letter-spacing:.01em;text-transform:none;
}

.c-fond-beige{background:var(--beige)}
.c-fond-creme{background:var(--creme)}
.c-filet-haut{border-top:1px solid var(--filet)}
.c-fond-beige.c-filet-haut{border-top-color:var(--filet-chaud)}

.c-etapes{counter-reset:etape}
.c-etape{counter-increment:etape;border-top:1px solid var(--filet-chaud);padding-top:16px}
.c-etape .elementor-heading-title::before{
  content:counter(etape,decimal-leading-zero);
  display:block;font-family:"Fraunces",Georgia,serif;font-size:1rem;
  color:var(--terracotta-fonce);margin-bottom:8px;font-variant-numeric:tabular-nums;
}
.c-etape .elementor-heading-title{
  font-family:"Inter",sans-serif;font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;
}

.elementor-widget-text-editor{color:var(--encre-2)}
img{max-width:100%;height:auto}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* =========================================================
   MISES EN PAGE — classes à poser sur les conteneurs Elementor
   ========================================================= */
.c-bande{padding-block:clamp(40px,6vw,78px)}
.c-rangee{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,26px);align-items:flex-start;width:100%}
.c-rangee > *{flex:1 1 210px;min-width:0}
.c-rangee-3 > *{flex:1 1 280px}
.c-rangee-2 > *{flex:1 1 320px}
.c-centre{text-align:center}
.c-centre .elementor-widget-container{text-align:center}

/* image de tête + deux secondaires */
.c-trio{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(12px,2vw,24px);align-items:start;width:100%}
@media (max-width:820px){.c-trio{grid-template-columns:1fr}}

/* la vague de mots — « mon style photographique » */
.c-vague{width:100%}
.c-vague p{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  column-gap:clamp(16px,3.4vw,52px);row-gap:.7em;margin:0;padding-block:.5em}
.c-vague span{font-family:"Fraunces",Georgia,serif;font-weight:300;
  font-size:clamp(1.7rem,4.6vw,3rem);line-height:1;color:var(--encre);display:inline-block}
.c-vague span:nth-child(1){font-size:1em;transform:translateY(-.16em) rotate(-1.4deg)}
.c-vague span:nth-child(2){font-size:.82em;transform:translateY(.24em) rotate(1.1deg)}
.c-vague span:nth-child(3){font-size:1.18em;transform:translateY(-.06em) rotate(-.5deg)}
.c-vague span:nth-child(4){font-size:.88em;transform:translateY(.28em) rotate(1.7deg)}
.c-vague span:nth-child(5){font-size:1.05em;transform:translateY(-.2em) rotate(-1deg)}

/* emplacement photo à fournir */
.c-a-fournir{background:var(--creme);border:1px dashed var(--filet-chaud);
  display:grid;place-items:center;text-align:center;min-height:180px;padding:18px}
.c-a-fournir p{font-family:"Inter",sans-serif;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.14em;color:var(--encre-3);margin:0;line-height:1.6}


/* =========================================================
   RATTRAPAGES — Elementor impose ses propres tailles,
   ces règles reprennent la main. Ne pas supprimer.
   ========================================================= */
.elementor-widget-heading.c-surtitre .elementor-heading-title{
  font-family:"Inter",sans-serif!important;font-size:.72rem!important;font-weight:400!important;
  line-height:1.6!important;letter-spacing:.22em!important;color:var(--menthe-foncee)!important;
}
.elementor-widget-heading.c-signature .elementor-heading-title{
  font-size:clamp(1.25rem,3vw,2rem)!important;font-style:italic!important;font-weight:300!important;
}
.elementor-widget-heading.c-etape-titre .elementor-heading-title{
  font-family:"Inter",sans-serif!important;font-size:.82rem!important;
  text-transform:uppercase;letter-spacing:.1em;
}
.c-vague p{font-size:clamp(1.7rem,4.6vw,3rem);line-height:1}

/* styles reportés des conteneurs vers les widgets */
.c-avis-texte{border-top:2px solid var(--menthe);padding-top:18px}
body{counter-reset:etape}
.c-etape-titre{border-top:1px solid var(--filet-chaud);padding-top:16px;counter-increment:etape}
.c-etape-titre .elementor-heading-title::before{
  content:counter(etape,decimal-leading-zero);display:block;
  font-family:"Fraunces",Georgia,serif;font-size:1rem;color:var(--terracotta-fonce);
  margin-bottom:8px;letter-spacing:0;
}
.c-univers-img img{transition:transform .5s ease}
.c-univers-img:hover img{transform:scale(1.045)}
.c-univers-titre .elementor-heading-title{font-size:1.02rem!important}

/* =========================================================
   RATTRAPAGES 2 — septembre 2026
   ========================================================= */

/* CAUSE RACINE des titres qui se chevauchent : la typographie
   globale « Primary » d’Elementor porte un interligne de 0.3em,
   soit trois fois moins que la hauteur des lettres. Toutes les
   lignes d’un même titre se superposaient (page À propos). */
:root,.elementor-kit-8{--e-global-typography-primary-line-height:1.15em}

/* Deux titres qui se suivent dans un même bloc (le libellé de la
   prestation puis le prix) : Elementor les colle l’un à l’autre et
   l’accent du « À » vient toucher les jambages de la ligne du dessus. */
.elementor-widget-heading + .elementor-widget-heading{margin-top:11px}

/* Le prix : grand, menthe foncée, chiffres alignés. */
.c-prix,.c-prix .elementor-heading-title{
  font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-size:clamp(1.55rem,3.2vw,2.15rem);line-height:1.3;
  color:var(--menthe-foncee);font-variant-numeric:tabular-nums;
}
.c-prix-detail,.c-prix-detail .elementor-heading-title{
  font-family:"Inter",sans-serif;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre-3);line-height:1.6;
}

/* Listes d’inclusions : tirets terracotta au lieu des pastilles noires. */
.c-inclus ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.c-inclus li{padding-left:19px;position:relative;font-size:.9rem;color:var(--encre-2)}
.c-inclus li::before{content:"";position:absolute;left:0;top:.68em;width:8px;height:1px;background:var(--terracotta)}

/* Cartes de la page Prestations (hub) */
.c-carte-titre .elementor-heading-title{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.22rem;line-height:1.25}
.c-carte-desc{font-size:.9rem;color:var(--encre-2)}
.c-carte-prix .elementor-heading-title{font-size:clamp(1.12rem,1.9vw,1.4rem);line-height:1.3;color:var(--menthe-foncee);font-family:"Fraunces",Georgia,serif}

/* Bloc « dans chaque prestation » */
.c-commun{border-top:1px solid var(--filet-chaud);padding-top:14px}
.c-commun .elementor-heading-title{font-family:"Inter",sans-serif;font-weight:500;font-size:.68rem;text-transform:uppercase;letter-spacing:.17em;color:var(--menthe-foncee);line-height:1.6}

/* ===== CARTES PRESTATIONS =====
   Elementor applique .elementor-widget-heading h2.elementor-heading-title
   (specificite 0-2-1). Nos classes doivent donc etre accrochees au widget
   lui-meme pour passer devant, sans !important. */
.elementor-widget-image.c-carte-img img{aspect-ratio:3/2;object-fit:cover;width:100%;display:block}
.elementor-widget-heading.c-carte-titre .elementor-heading-title{
  font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:1.2rem;line-height:1.3;
}
.elementor-widget-heading.c-carte-prix .elementor-heading-title{
  font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:clamp(1.1rem,1.9vw,1.38rem);
  line-height:1.3;color:var(--menthe-foncee);font-variant-numeric:tabular-nums;
}
.elementor-widget-heading.c-prix-detail .elementor-heading-title{
  font-family:"Inter",sans-serif;font-weight:400;font-size:.68rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--encre-3);line-height:1.6;
}
.elementor-widget-heading.c-commun .elementor-heading-title{
  font-family:"Inter",sans-serif;font-weight:500;font-size:.68rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--menthe-foncee);line-height:1.6;
}
.elementor-widget-heading.c-commun{border-top:1px solid var(--filet-chaud);padding-top:13px}

/* Sur mobile, les trois cartes passent l’une sous l’autre. */
@media(max-width:880px){.elementor-widget-image.c-carte-img img{aspect-ratio:16/10}}

/* ALIGNEMENT BAS DE CARTE
   Les trois titres n’ont pas la meme longueur. On pousse le prix et
   tout ce qui le suit vers le bas pour que les boutons s’alignent. */
.elementor-widget-heading.c-carte-prix{margin-top:auto;padding-top:14px}
.elementor-widget-button.btn-album .elementor-button{width:100%;justify-content:center}

/* ===== CARROUSEL DE TEMOIGNAGES (accueil) =====
   Le widget d’Elementor arrive avec ses propres conventions
   (avatar rond, fleches pales, hauteur calee sur la diapo la plus
   haute). On le ramene dans la charte. */

/* La hauteur suit chaque temoignage au lieu de se caler sur le plus long,
   ce qui supprime le vide sous les plus courts. */
.elementor-widget-testimonial-carousel .swiper-slide{height:auto}
.elementor-widget-testimonial-carousel .swiper-wrapper{align-items:flex-start}

/* Rien n’est arrondi sur ce site : l’avatar non plus. */
.elementor-testimonial__image img{border-radius:0}

/* Le temoignage se lit comme les citations du site. */
.elementor-testimonial__text{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:300;
  color:var(--encre);line-height:1.5;
}
.elementor-testimonial__name{
  font-family:"Inter",sans-serif;font-weight:500;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--encre-2);
}
.elementor-testimonial__title{
  font-family:"Inter",sans-serif;font-weight:400;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.15em;color:var(--encre-3);
}

/* Fleches lisibles et rapprochees du contenu ; pastilles en menthe. */
.elementor-widget-testimonial-carousel .elementor-swiper-button{color:var(--encre-3);opacity:1}
.elementor-widget-testimonial-carousel .elementor-swiper-button:hover{color:var(--terracotta-fonce)}
.elementor-widget-testimonial-carousel .swiper-pagination-bullet-active{background:var(--menthe-foncee)}

/* ===== HEROS DE L ACCUEIL : lisibilite du texte sur la photo =====
   La photo est posee en ::before sur la section, a 39 % d opacite.
   Les gris clairs de la charte sont prevus pour un fond creme uni :
   sur une photo texturee la baseline devient illisible. On pose un
   voile creme au centre, sous le texte seulement, et on remonte le
   contraste. La photo reste visible sur les bords. */
.elementor-element-A000004{position:relative;isolation:isolate}
.elementor-element-A000004::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 78% at 50% 50%,
    rgba(249,246,241,.80) 0%, rgba(249,246,241,.52) 48%, rgba(249,246,241,0) 82%);
}
.elementor-element-A000004 > .e-con-inner{position:relative;z-index:1}
.elementor-element-A000004 .elementor-heading-title{color:var(--encre)}
.elementor-element-A000004 .c-chapeau,
.elementor-element-A000004 .c-chapeau p{color:var(--encre-2)}

/* ===== REGLE D ALIGNEMENT =====
   Sections creme = contenu aligne a gauche (on lit).
   Sections beige = contenu centre (on respire : citation, avis, appel).
   La vague de mots reste centree : c est un motif graphique, pas du texte. */
.elementor-element-A000032 .elementor-widget-heading.c-surtitre{text-align:center}
.elementor-element-A000032 .c-surtitre .elementor-heading-title::after{margin-left:auto;margin-right:auto}

/* ===== LONGUEUR DE LIGNE DES TEMOIGNAGES =====
   Le carrousel etale le texte sur 1100 px, soit environ 140 signes par
   ligne. L oeil decroche au-dela de 75. Le reste du site est cale entre
   62 et 64 signes (.c-texte, .c-chapeau) : on aligne. */
.elementor-widget-testimonial-carousel .elementor-testimonial__text{
  max-width:58ch;margin-inline:auto;
}

/* ===== RESPIRATION DU CARROUSEL (revision) =====
   Swiper garde la hauteur de la plus longue citation. En laissant les
   diapositives se retracter, tout le vide tombait sous les courtes.
   On garde donc des diapositives de meme hauteur et on centre le
   contenu : l espace se repartit de part et d autre et se lit comme
   une respiration voulue. */
.elementor-widget-testimonial-carousel .swiper-wrapper{align-items:stretch}
.elementor-widget-testimonial-carousel .swiper-slide{height:auto;display:flex;align-items:center}
.elementor-widget-testimonial-carousel .swiper-slide > .elementor-testimonial{width:100%}

/* ===== TABLEAUX DE TARIFS =====
   Le tableau arrivait avec les bordures grises et le zebrage gris de
   WordPress, etrangers a la charte. On enleve les filets verticaux,
   on alterne en beige tres clair (le regard suit la ligne sans avoir
   besoin de grille) et la colonne des prix reprend le traitement des
   prix du site : Fraunces, menthe foncee, chiffres tabulaires. */
.elementor-widget-text-editor table{width:100%;border-collapse:collapse;border:0;margin:0}
.elementor-widget-text-editor table td,
.elementor-widget-text-editor table th{
  border:0;border-bottom:1px solid var(--filet);
  padding:15px 18px;font-size:.92rem;line-height:1.5;color:var(--encre-2);background:transparent;
  vertical-align:top;text-align:left;
}
.elementor-widget-text-editor table tr:nth-child(odd) td{background:rgba(216,201,184,.34)}
.elementor-widget-text-editor table tr:last-child td{border-bottom:0}
.elementor-widget-text-editor table td:last-child{
  font-family:"Fraunces",Georgia,serif;font-size:1.05rem;color:var(--menthe-foncee);
  text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;width:1%;
}

/* ===== BLOC « LES AUTRES PRESTATIONS » (bas de la page mariage) ===== */
.elementor-element-D000001{border-top:1px solid var(--filet)}
.c-btn-presta .elementor-button{width:100%;justify-content:center;padding:15px 20px}

/* Deux sections creme qui se suivent : un filet marque le changement
   d information, faute de changement de fond. */
.elementor-element-f000031{border-top:1px solid var(--filet)}

/* ===== RESPIRATION DES CELLULES (specificite) =====
   Une regle du theme calait les cellules a 11px 0 : sans marge laterale,
   le libelle colle au bord et le prix est a l etroit. On accroche la
   regle au conteneur du widget pour passer devant, sans !important. */
.elementor-widget-text-editor .elementor-widget-container table td,
.elementor-widget-text-editor .elementor-widget-container table th{
  padding:15px 18px;
}
.elementor-widget-text-editor .elementor-widget-container table td:last-child{
  padding-left:26px;
}

/* ===== TROIS BOUTONS EN TIERS (bas de la page mariage) =====
   Les boutons se dimensionnaient sur leur libelle : trois largeurs
   differentes qui ressemblaient a des onglets oublies. En tiers egaux
   ils se lisent comme un choix offert. */
.elementor-element-D000001 .elementor-widget-button{flex:1 1 0;min-width:0}
.c-btn-presta .elementor-button{width:100%;justify-content:center;padding:16px 18px;text-align:center}
@media(max-width:820px){.elementor-element-D000001 .elementor-widget-button{flex:1 1 100%}}