/*
Theme Name: Hello Child
Theme URI: https://crazy-in-love.fr
Description: Thème enfant de Hello Elementor pour Crazy In Love. Fondations + header/footer + menu mobile.
Author: Kupla Agency
Template: hello-elementor
Version: 1.8
*/

/* ═══════════════════════════════════════════════════
   POLICES CRAZY IN LOVE — Benzin + Edwardian Script
   ═══════════════════════════════════════════════════ */
@font-face{
  font-family:'Benzin';
  src:url('fonts/benzin-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Benzin';
  src:url('fonts/benzin-medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Benzin';
  src:url('fonts/benzin-semibold.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Benzin';
  src:url('fonts/benzin-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Benzin';
  src:url('fonts/benzin-extraBold.woff2') format('woff2'),
      url('fonts/benzin-extrabold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Edwardian Script';
  src:url('fonts/edwardianscript-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Edwardian Script';
  src:url('fonts/edwardianscript-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ============================================================
   FONDATIONS
   ============================================================ */
:root{
  --rose:#EA96C5; --rouge:#AF2418; --brun:#381212; --creme:#FDF6DA;
  --menthe:#D7F7F2; --lavande:#B3A7C7; --sauge:#C9E0A2;
  --rose-50:#fbe9f3; --rose-100:#f6d3e7; --rouge-d:#8e1c12; --bordeaux:#6E1A18;
  --brun-60:rgba(56,18,18,.6); --brun-12:rgba(56,18,18,.12);
  --font-display:'Benzin',system-ui,sans-serif;
  --font-narrow:'Benzin',system-ui,sans-serif;
  --font-body:'Benzin',system-ui,sans-serif;
  --font-script:'Edwardian Script','Brush Script MT',cursive;
  --max:1200px; --gutter:clamp(20px,5vw,64px);
  --radius:18px; --radius-s:11px; --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:76px;
  --star-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0 L58 34 L92 26 L64 48 L100 50 L64 52 L92 74 L58 66 L50 100 L42 66 L8 74 L36 52 L0 50 L36 48 L8 26 L42 34 Z'/%3E%3C/svg%3E");
}

.cil-star{display:inline-block;width:1em;height:1em;background:currentColor;
  -webkit-mask:var(--star-mask) center/contain no-repeat;
  mask:var(--star-mask) center/contain no-repeat;flex:none}

/* Étoiles SVG d'Emeline (inline dans le texte) */
.cil-header-star{display:inline-block;flex:none;width:1.35em;height:1.35em;vertical-align:-.28em;
  background:url('https://crazy-in-love.fr/wp-content/uploads/2026/07/Plan-de-travail-79.svg') center/contain no-repeat}
/* footer lavande (clair) : etoile ROUGE (la rose ne ressortirait pas) */
.cil-footer-star{display:inline-block;flex:none;width:1.35em;height:1.35em;vertical-align:-.28em;
  background:url('https://crazy-in-love.fr/wp-content/uploads/2026/07/Plan-de-travail-77.svg') center/contain no-repeat}

/* Révélation au scroll.
   FILET DE SECURITE : les blocs [data-reveal] demarrent invisibles et
   attendent qu'un script ajoute .is-revealed. Si ce script ne tourne pas
   (header.js absent ou en echec), une animation CSS les fait apparaitre
   toute seule apres un court delai -> le contenu ne disparait JAMAIS.
   Si le JS fonctionne, .is-revealed prend le relais normalement. */
[data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  animation:cilRevealFallback .01s linear 1.2s forwards}
[data-reveal].is-revealed{opacity:1;transform:none;animation:none}
@keyframes cilRevealFallback{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;animation:none !important}
}

/* ============================================================
   HEADER (desktop) — BRUN FONCÉ
   Structure : [menu 1] [LOGO centré] [menu 2] [bouton simulateur]
   Le logo est centré sur la PAGE (position absolue), les 2 menus
   se répartissent l'espace de part et d'autre.
   ============================================================ */
.cil-header{position:fixed;top:0;left:0;right:0;z-index:1000;min-height:var(--header-h);
  display:flex;align-items:center;background:var(--brun);
  border-bottom:1px solid rgba(253,246,218,.14);transition:background .3s,box-shadow .3s}
.cil-header.scrolled{box-shadow:0 4px 24px -12px rgba(0,0,0,.55)}

/* padding-top > padding-bottom : donne de l'air au-dessus du logo qui
   sinon touchait le bord haut du header. */
.cil-header__inner{position:relative;max-width:var(--max);margin:0 auto;padding:14px var(--gutter) 10px;width:100%;
  display:flex;align-items:center;flex-wrap:nowrap;gap:16px}

/* Le logo est sorti du flux : il se cale sur le centre exact de la page,
   quelles que soient les largeurs des menus et du bouton. */
/* --logo-h : hauteur d'affichage du logo, pilotee plus bas.
   --logo-nudge : remontee pour aligner le TEXTE du logo (et non l'image
   entiere) sur la ligne des menus. Le fichier place la boule disco sur
   les 41,5 % superieurs, le texte occupe le reste : le centre optique du
   texte se situe donc 20,7 % plus bas que le centre de l'image. */
.cil-logo{--logo-h:50px;--logo-nudge:calc(var(--logo-h) * .245);
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) translateY(calc(var(--logo-nudge) * -1));
  z-index:2;display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--creme);line-height:0;pointer-events:auto}
/* sélecteurs larges : couvre <span class="cil-logo"><a class="custom-logo-link"><img>
   aussi bien que toute autre imbrication générée par WordPress */
.cil-header img,
.cil-header .custom-logo,
.cil-logo img,.cil-logo .custom-logo,.cil-logo .custom-logo-link img{
  height:72px !important;max-height:72px !important;width:auto !important;
  max-width:300px !important;object-fit:contain !important;display:block !important;
  transition:transform .3s var(--ease)}
.cil-logo .custom-logo-link{display:flex !important;align-items:center;line-height:0}
.cil-logo:hover img,.cil-logo:hover .custom-logo{transform:scale(1.04)}
.cil-logo strong{font-family:var(--font-display);font-weight:800;font-size:1.3rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--creme)}
.cil-logo small{display:block;font-family:var(--font-display);font-weight:600;font-size:.66rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--rose);margin-top:2px;text-align:center}

/* Moitié gauche : menu 1 collé au logo (aligné à droite de sa moitié) */
.cil-nav--left{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:flex-end;
  flex-wrap:nowrap;padding-right:calc(var(--logo-space,300px) / 2)}
/* Moitié droite : menu 2 puis bouton, collés au logo (alignés à gauche) */
.cil-header__right{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:flex-start;
  flex-wrap:nowrap;white-space:nowrap;gap:0;padding-left:calc(var(--logo-space,300px) / 2)}
/* NI le menu 2 NI le bouton ne retrecissent : sinon un item passe a la
   ligne et pousse le bouton par-dessus le menu. Les deux gardent leur
   taille naturelle ; c'est la bascule burger (<1100px) qui gere l'espace. */
.cil-nav--right{flex:0 0 auto;display:flex;align-items:center;flex-wrap:nowrap;white-space:nowrap}
.cil-nav--right > ul{flex-wrap:nowrap;white-space:nowrap}
.cil-header__cta{flex:0 0 auto;white-space:nowrap}

.cil-nav > ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.cil-nav a,.cil-nav a:link,.cil-nav a:visited{font-family:var(--font-display);font-weight:600;
  font-size:.92rem;letter-spacing:.02em;text-transform:uppercase;color:var(--creme) !important;
  text-decoration:none !important;padding:.55em 1em;border-radius:100px;
  transition:background .25s var(--ease),color .25s;white-space:nowrap}
.cil-nav a:hover{background:rgba(253,246,218,.12);color:#fff !important}
.cil-nav .current-menu-item > a,
.cil-nav .current-menu-item > a:link,
.cil-nav .current-menu-item > a:visited{color:var(--rose) !important}

/* Sous-menu déroulant DESKTOP */
.cil-nav li{position:relative}
.cil-nav .sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);
  min-width:210px;background:var(--brun);border:1px solid rgba(253,246,218,.14);
  border-radius:var(--radius-s);padding:8px;margin:0;list-style:none;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.7);opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);z-index:1001}
.cil-nav li:hover > .sub-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(4px)}
.cil-nav .sub-menu a{display:block;text-align:center;font-size:.76rem;padding:.7em 1em;white-space:normal}
.cil-nav .menu-item-has-children > a::after{content:"▾";margin-left:.4em;font-size:.7em;opacity:.7}

/* Bouton simulateur de budget */
.cil-header__cta,.cil-header__cta:link,.cil-header__cta:visited,
.cil-header__cta:hover,.cil-header__cta:active,.cil-header__cta:focus{
  color:var(--brun) !important;text-decoration:none !important}
.cil-header__cta{position:relative;display:inline-flex;align-items:center;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:.8rem;
  letter-spacing:.015em;padding:.78em 1.35em;border-radius:100px;border:1.6px solid var(--rose);
  background:var(--rose);white-space:nowrap;overflow:hidden;line-height:1.2;margin-left:10px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,border-color .25s}
.cil-header__cta::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease)}
.cil-header__cta:hover::after{left:130%}
.cil-header__cta:hover{transform:translateY(-2px);background:#f0aed3;border-color:#f0aed3;
  box-shadow:0 10px 24px -12px rgba(234,150,197,.65)}
/* pas de fleche dans ce bouton : le libelle se suffit */

/* ============================================================
   ADAPTATION FLUIDE
   Plutot que des paliers fixes, tout (police des liens, taille du
   logo, couloir central, bouton) se calcule en continu selon la
   largeur d'ecran. Le header encaisse donc l'ajout d'une entree de
   menu ou un libelle plus long sans reglage supplementaire.
   ============================================================ */
@media (min-width:1101px){
  /* --respire : espace commun autour du logo ET avant le bouton,
     pour que les trois intervalles restent visuellement equivalents. */
  .cil-header__inner{--respire:clamp(20px,1.75vw,29px);
    --logo-space:calc(clamp(100px,8.4vw,125px) + var(--respire) * 2);
    gap:0}
  .cil-nav a,.cil-nav a:link,.cil-nav a:visited{
    font-size:clamp(.72rem,.78vw,.92rem);padding:.55em clamp(.5em,.75vw,1em)}
  .cil-header__cta{font-size:clamp(.72rem,.78vw,.92rem);
    padding:.78em clamp(1em,1.3vw,1.55em);
    margin-left:calc(var(--respire) - clamp(.2em,.3vw,.42em))}
  .cil-logo{--logo-h:clamp(40px,3.2vw,50px)}
  .cil-header img,.cil-logo img,.cil-logo .custom-logo,.cil-logo .custom-logo-link img{
    height:clamp(40px,3.2vw,50px) !important;max-height:clamp(40px,3.2vw,50px) !important;
    max-width:clamp(140px,15vw,215px) !important}
}

/* Filet de securite : si malgre tout le contenu ne tient pas sur une
   ligne, le bouton se replie sous le menu au lieu de deborder. */
@media (min-width:1101px){
  .cil-header__right{flex-wrap:nowrap}
}

/* Burger (caché desktop) */
.cil-burger{display:none;flex-direction:column;justify-content:center;gap:5px;
  width:48px;height:48px;background:none;border:none;cursor:pointer;padding:0}
.cil-burger span{display:block;width:26px;height:2px;background:var(--creme);border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s var(--ease);margin:0 auto}
.cil-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.cil-burger.is-open span:nth-child(2){opacity:0}
.cil-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Menu mobile (caché desktop) */
.cil-mobile{display:none}
body:not(.elementor-editor-active){padding-top:var(--header-h)}

/* ============================================================
   FOOTER — LAVANDE #B3A7C7
   Fond CLAIR : textes bruns, titres rouge fonce, certifications
   sur pastilles adaptees a chaque logo.
   ============================================================ */
.cil-footer{position:relative;background:var(--lavande);color:var(--brun);overflow:hidden}

/* étoiles décoratives en fond (rose, discrètes) */
.cil-footer__deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cil-footer__deco .st{position:absolute;background:var(--brun);opacity:.12;
  -webkit-mask:var(--star-mask) center/contain no-repeat;mask:var(--star-mask) center/contain no-repeat;
  animation:cilFootTw 6s ease-in-out infinite}
.cil-footer__deco .st:nth-child(1){width:26px;height:26px;top:6%;left:4%;animation-delay:0s}
.cil-footer__deco .st:nth-child(2){width:16px;height:16px;top:18%;right:6%;animation-delay:1.4s;opacity:.8}
.cil-footer__deco .st:nth-child(3){width:20px;height:20px;bottom:14%;left:8%;animation-delay:2.2s;opacity:.12}
.cil-footer__deco .st:nth-child(4){width:13px;height:13px;bottom:26%;right:5%;animation-delay:1.7s;opacity:.16}
.cil-footer__deco .st:nth-child(5){width:11px;height:11px;top:44%;left:2%;animation-delay:.8s;opacity:.13}
.cil-footer__deco .st:nth-child(6){width:18px;height:18px;top:30%;left:16%;animation-delay:2s;opacity:.9}
.cil-footer__deco .st:nth-child(7){width:14px;height:14px;top:62%;right:14%;animation-delay:.5s;opacity:.8}
.cil-footer__deco .st:nth-child(8){width:10px;height:10px;bottom:8%;right:28%;animation-delay:2.6s;opacity:.15}
.cil-footer__deco .st:nth-child(9){width:22px;height:22px;top:8%;right:26%;animation-delay:1.1s;opacity:.8}
.cil-footer__deco .st:nth-child(10){width:12px;height:12px;bottom:38%;left:24%;animation-delay:1.9s;opacity:.12}
@keyframes cilFootTw{0%,100%{opacity:.07;transform:scale(.85) rotate(0)}50%{opacity:.2;transform:scale(1.05) rotate(10deg)}}

/* ═══ BANDE INSTAGRAM ═══ */
.cil-insta-band{position:relative;z-index:1;width:100%;
  padding:clamp(36px,5vw,60px) var(--gutter) clamp(30px,4vw,48px);
  border-bottom:1px solid rgba(56,18,18,.18);text-align:center}
.cil-insta-band__head{max-width:var(--max);margin:0 auto clamp(20px,3vw,32px);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.cil-insta-band__label{display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:.76rem;letter-spacing:.11em;color:var(--rouge-d);line-height:1}
.cil-insta-band__link,.cil-insta-band__link:link,.cil-insta-band__link:visited,
.cil-insta-band__link:hover,.cil-insta-band__link:active,.cil-insta-band__link:focus{
  color:var(--rouge-d) !important;text-decoration:none !important}
.cil-insta-band__link{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:.74rem;letter-spacing:.05em;transition:color .2s,transform .25s var(--ease)}
.cil-insta-band__link:hover{color:var(--brun) !important;transform:translateX(3px)}
/* Sur ORDINATEUR, le bouton "Me suivre" remonte a droite du label (position
   d'origine). Sur MOBILE (voir plus bas), il reste sous le carrousel. */
@media(min-width:701px){
  .cil-insta-band{display:grid;grid-template-columns:1fr auto;
    grid-template-areas:"head cta" "feed feed";align-items:center}
  .cil-insta-band__head{grid-area:head;margin-bottom:clamp(20px,3vw,32px)}
  .cil-insta-band__cta{grid-area:cta;margin-bottom:clamp(20px,3vw,32px);text-align:right}
  .cil-insta-band__feed{grid-area:feed}
}
.cil-insta-band__feed{max-width:var(--max);margin:0 auto}
.cil-insta-band__feed #sb_instagram{padding:0 !important;margin:0 auto !important}
.cil-insta-band__feed .sbi_photo{border-radius:10px}

/* ═══ CORPS DU FOOTER ═══ */
.cil-footer__inner{position:relative;z-index:1;max-width:var(--max);margin:0 auto;
  padding:clamp(44px,6vw,72px) var(--gutter) 26px}
.cil-footer__top{display:grid;grid-template-columns:1.4fr 2fr;gap:56px;
  padding-bottom:40px;border-bottom:1px solid rgba(56,18,18,.2)}

/* ═══ LOGOS CERTIFICATIONS ═══
   GABARIT COMMUN : la hauteur est posee sur le BLOC, pas sur l'image.
   Les 3 logos font donc exactement la meme taille a l'ecran, quel que
   soit leur format d'origine (carre, rectangle, macaron). */
.cil-footer__certif-label{display:block;font-family:var(--font-display);font-weight:800;
  text-transform:uppercase;font-size:1.02rem;letter-spacing:.02em;color:var(--rouge-d);margin-bottom:18px;line-height:1.1}
.cil-footer__certif-logos{display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);flex-wrap:wrap}
/* sur ordi, les 3 restent imperativement sur une seule ligne */
@media(min-width:901px){
  .cil-footer__certif-logos{flex-wrap:nowrap}
}
.cil-certif{box-sizing:border-box;flex:0 0 auto;height:clamp(58px,6vw,76px);padding:10px 14px;
  display:inline-flex;align-items:center;justify-content:center;border-radius:12px;
  transition:transform .25s var(--ease),opacity .25s}
.cil-certif:hover{transform:translateY(-3px);opacity:.85}
.cil-certif img{height:100%;width:auto;max-width:none;object-fit:contain;display:block}
/* EFMM (blanc & or) : invisible sur le lavande clair -> pastille BRUNE. */
.cil-certif--square{background:var(--brun);box-shadow:0 6px 18px -10px rgba(56,18,18,.35)}
/* ASSOCEM (rouge) -> pastille BLANCHE, le rouge y ressort net. */
.cil-certif--rect{background:#fff;border:1px solid rgba(56,18,18,.08);
  box-shadow:0 6px 18px -10px rgba(56,18,18,.3)}
/* Mariez-vous : macaron autoportant (forme et fond inclus dans l'image)
   -> aucun fond ajoute, sinon on obtient un cadre dans un cadre.
   padding:0 -> sans pastille, le padding du gabarit commun ne sert a rien
   et rognait 20px sur l'image : le macaron paraissait donc plus petit que
   les deux autres a hauteur de bloc identique.
   height majoree -> un disque parait toujours plus petit qu'un rectangle
   de meme hauteur, il faut le sur-dimensionner pour equilibrer la ligne. */
.cil-certif--badge{background:transparent;padding:0;height:clamp(68px,7vw,88px)}

.cil-footer__accroche{color:rgba(56,18,18,.9);font-size:.94rem;line-height:1.62;max-width:42ch;margin:22px 0 0;font-weight:500}

.cil-footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
/* GROS TITRES EN ROUGE FONCE (lisible sur le lavande) */
.cil-footer__col h4{font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.02em;color:var(--rouge-d);margin:0 0 18px;line-height:1.1}
.cil-footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cil-footer__col a,.cil-footer__col a:link,.cil-footer__col a:visited{
  color:rgba(56,18,18,.92) !important;text-decoration:none !important;font-size:.92rem;font-weight:500;
  transition:color .2s,padding-left .25s var(--ease)}
.cil-footer__col a:hover{color:var(--rouge-d) !important;padding-left:4px}
.cil-footer__contact li{color:rgba(56,18,18,.9);font-size:.92rem;font-weight:500}
/* Logo dans la colonne "Me contacter", sous l'adresse.
   Pastille BLANCHE derriere pour le detacher du fond lavande et garantir
   sa lisibilite quel que soit le logo. */
.cil-footer__logo{margin-top:22px;line-height:0}
.cil-footer__logo a{display:inline-flex;align-items:center;line-height:0;
  background:#fff;border-radius:14px;padding:12px 18px;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.5);
  transition:opacity .25s var(--ease),transform .25s var(--ease)}
.cil-footer__logo a:hover{opacity:.9;transform:translateY(-2px)}
.cil-footer__logo img,.cil-footer__logo .custom-logo{height:52px;width:auto;max-width:180px;
  object-fit:contain;display:block}
.cil-footer__logo-txt strong{display:block;font-family:var(--font-display);font-weight:800;
  font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;color:var(--brun)}
.cil-footer__logo-txt .cil-footer__tag{display:block;font-family:var(--font-display);font-weight:500;
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--rouge-d);margin-top:2px}

.cil-footer__bottom{padding-top:24px;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:16px;font-size:.8rem;font-weight:500;color:rgba(56,18,18,.75)}
.cil-footer__copy{justify-self:start}
.cil-footer__copy .cil-footer-star{width:1.1em;height:1.1em;margin:0 .3em;vertical-align:-.2em}
.cil-footer__credit{justify-self:center;display:inline-flex;align-items:center;gap:.4em;
  color:rgba(56,18,18,.65);white-space:nowrap}
.cil-footer__credit .cil-heart-mini{width:14px;height:14px;fill:var(--rouge-d);flex:none}
.cil-footer__credit a,.cil-footer__credit a:link,.cil-footer__credit a:visited{
  color:rgba(56,18,18,.88) !important;text-decoration:none !important;font-weight:700;transition:color .2s}
.cil-footer__credit a:hover{color:var(--rouge-d) !important}
.cil-footer__legal{justify-self:end}
.cil-footer__legal a,.cil-footer__legal a:link,.cil-footer__legal a:visited{
  color:rgba(56,18,18,.75) !important;text-decoration:none !important;transition:color .2s}
.cil-footer__legal a:hover{color:var(--rose) !important}

/* ============================================================
   MENU MOBILE PLEIN ÉCRAN (< 1100px)
   ============================================================ */
@media (max-width:1100px){
  /* header : logo réduit, nav desktop cachée, burger visible */
  .cil-header__inner{padding:5px var(--gutter)}
  .cil-nav--left,.cil-nav--right,.cil-header__right,.cil-header__cta{display:none}
  /* pas de menus a aligner en mobile : le logo se recentre normalement */
  .cil-logo{--logo-h:38px;max-width:60vw;
    transform:translate(-50%,-50%)}
  .cil-logo .custom-logo-link,.cil-logo a{display:flex;justify-content:center}
  .cil-header img,
  .cil-logo img,.cil-logo .custom-logo,
  .cil-logo a img,.cil-header .custom-logo-link img,
  .cil-logo .custom-logo-link img{height:38px !important;max-height:38px !important;
    width:auto !important;max-width:160px !important}
  /* position/z-index : sans ca, la boite du logo (absolue, z-index:2)
     peut passer par-dessus le burger sur les petits ecrans et avaler le tap. */
  .cil-burger{display:flex;margin-left:auto;position:relative;z-index:3}

  /* Panneau plein écran — BRUN */
  .cil-mobile{display:flex;flex-direction:column;position:fixed;inset:0;z-index:999;
    background:var(--brun);padding:calc(var(--header-h) + 40px) var(--gutter) 40px;
    overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
  .cil-mobile.open{opacity:1;visibility:visible;transform:none}

  /* Liste des liens */
  .cil-mobile__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
  .cil-mobile__list > li{border-bottom:1px solid rgba(253,246,218,.1)}
  .cil-mobile__list > li > a{display:flex;align-items:center;justify-content:space-between;
    font-family:var(--font-display);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;
    text-transform:uppercase;color:var(--creme);text-decoration:none;padding:.62em 0;
    transition:color .2s var(--ease)}
  .cil-mobile__list > li > a:hover,
  .cil-mobile__list > li.current-menu-item > a{color:var(--rose)}

  /* cascade d'apparition */
  .cil-mobile.open .cil-mobile__list > li{opacity:0;transform:translateY(14px);
    animation:cilFadeUp .5s var(--ease) forwards}
  .cil-mobile.open .cil-mobile__list > li:nth-child(1){animation-delay:.08s}
  .cil-mobile.open .cil-mobile__list > li:nth-child(2){animation-delay:.14s}
  .cil-mobile.open .cil-mobile__list > li:nth-child(3){animation-delay:.20s}
  .cil-mobile.open .cil-mobile__list > li:nth-child(4){animation-delay:.26s}
  .cil-mobile.open .cil-mobile__list > li:nth-child(5){animation-delay:.32s}
  .cil-mobile.open .cil-mobile__list > li:nth-child(6){animation-delay:.38s}
  .cil-mobile.open .cil-mobile__list > li:nth-child(7){animation-delay:.44s}
  @keyframes cilFadeUp{to{opacity:1;transform:none}}

  /* Bouton chevron accordéon (injecte par header.js) */
  .cil-mobile__toggle{margin-left:auto;background:none;border:none;cursor:pointer;
    color:var(--rose);width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
    flex:0 0 auto}
  .cil-mobile__toggle svg{width:24px;height:24px;transition:transform .3s var(--ease);stroke:currentColor}
  .cil-mobile__list > li.open .cil-mobile__toggle svg{transform:rotate(180deg)}

  /* Sous-menu accordéon */
  .cil-mobile__list .sub-menu{list-style:none;margin:0;padding:0;
    max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
  .cil-mobile__list > li.open .sub-menu{max-height:500px}
  .cil-mobile__list .sub-menu a{display:block;font-family:var(--font-display);font-weight:500;
    font-size:1.02rem;text-transform:none;color:rgba(253,246,218,.75);text-decoration:none;
    padding:.5em 0 .5em 1.2em;border-left:2px solid rgba(253,246,218,.14);margin-left:2px;
    transition:color .2s,border-color .2s}
  .cil-mobile__list .sub-menu a:hover{color:var(--rose);border-color:var(--rose)}
  .cil-mobile__list .sub-menu li:last-child a{padding-bottom:.9em}

  /* CTA */
  .cil-mobile__cta{align-self:flex-start;display:inline-flex;align-items:center;
    font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.5rem;
    letter-spacing:-.01em;padding:.5em .8em;border-radius:14px;background:var(--rouge);
    color:var(--creme);text-decoration:none;margin:28px 0 0;
    transition:transform .3s var(--ease),background .25s}
  .cil-mobile__cta:hover{transform:translateY(-2px);background:var(--rouge-d)}

  /* Zone contact */
  .cil-mobile__contact{margin-top:auto;padding-top:36px;display:flex;flex-direction:column;gap:8px}
  .cil-mobile__contact-label{display:inline-flex;align-items:center;gap:.55em;
    font-family:var(--font-display);font-weight:600;text-transform:uppercase;font-size:.66rem;
    letter-spacing:.13em;color:var(--rose);margin-bottom:6px}
  .cil-mobile__contact-line{color:rgba(253,246,218,.85);text-decoration:none;font-size:1rem;
    transition:color .2s;width:fit-content}
  .cil-mobile__contact-line:hover{color:var(--creme)}
  .cil-mobile__socials{display:flex;gap:12px;margin-top:16px}
  .cil-mobile__socials a{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;border:1px solid rgba(253,246,218,.2);
    color:var(--creme);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
  .cil-mobile__socials a:hover{background:var(--rose);color:var(--brun);border-color:var(--rose);transform:translateY(-2px)}
  .cil-mobile__socials svg{width:22px;height:22px;stroke:currentColor}

  /* footer responsive */
  .cil-insta-band{text-align:left}
  /* le label tient sur UNE SEULE LIGNE : on retire le retour a la ligne et on
     laisse la taille se reduire un peu si necessaire. */
  .cil-insta-band__head{flex-wrap:nowrap;justify-content:flex-start;gap:6px 16px}
  .cil-insta-band__label{white-space:nowrap;font-size:clamp(.56rem,2.5vw,.76rem);letter-spacing:.06em;min-width:0}
  .cil-insta-band__label .cil-footer-star{flex:none}
  /* "Me suivre" passe SOUS le carrousel, centre */
  .cil-insta-band__cta{margin-top:18px;text-align:center}
  .cil-footer__top{grid-template-columns:1fr;gap:44px;text-align:center}
  .cil-footer__brand{display:flex;flex-direction:column;align-items:center}
  .cil-footer__accroche{margin-left:auto;margin-right:auto}
  .cil-footer__certif{display:flex;flex-direction:column;align-items:center}
  .cil-footer__certif-logos{justify-content:center}
  .cil-footer__cols{grid-template-columns:1fr 1fr;gap:28px 24px;text-align:center}
  .cil-footer__col ul{align-items:center}
  .cil-footer__contact{align-items:center}
  .cil-footer__col a:hover{padding-left:0}
  .cil-footer__col:last-child{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto;
    align-items:center;gap:24px;text-align:left;border-top:1px solid rgba(56,18,18,.18);
    padding-top:24px;margin-top:4px}
  .cil-footer__col:last-child h4{grid-column:1;text-align:left;margin-bottom:0}
  .cil-footer__col:last-child .cil-footer__contact{grid-column:1;grid-row:2;align-items:flex-start;margin-top:8px}
  .cil-footer__logo{grid-column:2;grid-row:1 / span 2;display:flex;align-items:center;justify-content:center;margin-top:0}
  .cil-footer__logo img,.cil-footer__logo .custom-logo{height:48px;max-width:130px}
  .cil-footer__bottom{grid-template-columns:1fr;justify-items:center;text-align:center;gap:12px}
  .cil-footer__copy,.cil-footer__legal,.cil-footer__credit{justify-self:center}
}

@media (max-width:520px){
  .cil-footer__cols{grid-template-columns:1fr 1fr;gap:24px 16px}
  .cil-footer__logo img,.cil-footer__logo .custom-logo{height:42px;max-width:110px}
  /* gabarit commun : une seule regle pour les 3 certifications */
  .cil-certif{height:52px;padding:8px 12px}
  .cil-certif--badge{height:61px;padding:0}
  .cil-footer__col h4,.cil-footer__certif-label{font-size:.9rem}
  .cil-mobile__list > li > a{font-size:1.32rem}
  .cil-mobile__cta{font-size:1.32rem}
}

/* tres petit ecran : le logo repasse SOUS le texte de contact */
@media (max-width:380px){
  .cil-footer__col:last-child{grid-template-columns:1fr}
  .cil-footer__logo{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:16px}
  .cil-footer__logo img,.cil-footer__logo .custom-logo{height:46px;max-width:150px}
}

@media (prefers-reduced-motion:reduce){
  .cil-footer__deco .st{animation:none}
}

/* ============================================================
   PLEINE LARGEUR DES SECTIONS
   Le theme parent (Hello Elementor) contraint le contenu a une
   largeur max, ce qui laisse une bordure sur les cotes. Les
   sections .cil-* en sortent pour occuper toute la largeur.
   scrollbar-gutter stabilise la largeur pour eviter que la barre
   de defilement decale le contenu ou cree un scroll horizontal.
   ============================================================ */
html{scrollbar-gutter:stable}
.cil-hero,.cil-pain,.cil-about,.cil-steps,
.cil-avis,.cil-presta,.cil-cta,.cil-footer{
  width:auto;
  /* --sbw = largeur de la scrollbar, mesuree dans header.php et posee sur <html>.
     50vw inclut la scrollbar ; on la retranche pour coller aux bords reels. */
  margin-left:calc(50% - 50vw + var(--sbw,0px)/2);
  margin-right:calc(50% - 50vw + var(--sbw,0px)/2);
}
/* garde-fou : aucun debordement horizontal a l'echelle du site */
html,body{overflow-x:hidden}

/* ============================================================
   STICKY FOOTER
   ============================================================ */
body{display:flex;flex-direction:column;min-height:100vh}
body > .cil-header{flex:0 0 auto}
#content,.site-main,main,.elementor{flex:1 0 auto}
.cil-footer{flex:0 0 auto}
html{background:var(--lavande)}

/* ============================================================
   TON CSS DE PAGE (à compléter au fil de l'intégration)
   ============================================================ */
/* masque le titre automatique des pages */
.page .page-header,
.page .entry-title{display:none}