/*
Theme Name: Divi Child
Theme URI: https://ateliersdescoiffeurs.com
Description: Theme enfant de Divi pour l'Atelier des Coiffeurs de Cebazat
Author: Atelier des Coiffeurs
Template: Divi
Version: 1.3.2
*/
/* ==========================================================================
   NOTE DE RACCORD DIVI 5 — a lire avant d ecrire du CSS pour ce site
   (vaut pour les pages Tarifs, Gerzat et Riom a venir)

   1. Les modules divi/heading ne rendent PAS un <h2> nu. Ils sortent en
      .et_pb_module_header a l interieur de .et_pb_heading_container :

        <div class="et_pb_heading_container">
          <h2 class="et_pb_module_header">...</h2>
        </div>

      Une classe posee sur le module (type .xl de la maquette) ne les atteint
      jamais. Il faut viser .et_pb_heading_container hN.et_pb_module_header.

   2. Divi injecte ses presets en <style> INLINE dans le document, donc APRES
      les feuilles externes. A specificite egale, Divi gagne toujours par
      position. Son selecteur de titre est en (0,2,1) :

        .preset--module--divi-heading--default .et_pb_heading_container h2

      Il faut donc atteindre (0,3,1) minimum pour passer devant. Exemple :

        .et_builder_inner_content .et_pb_heading_container h2.et_pb_module_header

   3. Certains presets sont en !important — notamment la couleur des liens et
      des titres dans les modules texte :

        .preset--module--divi-text--default .et_pb_text_inner a  { ... !important }
        .preset--module--divi-text--default .et_pb_text_inner h1 { ... !important }

      La specificite seule ne suffit pas : il faut !important de son cote.
      La valeur saumon #f25c54 qui remonte vient de et_ai_layout_primary_color
      dans l option et_divi (reste de generation IA).

   6. NE JAMAIS RELIRE LE CSS AVEC respira_read_theme_file POUR L EDITER.
      L outil sert une copie EN CACHE. Constate le 15/08 : il a renvoye 31 562
      caracteres en Version 1.1.8 alors que le fichier reel en faisait 34 813
      en 1.2.2 — trois versions de retard, sans aucun signal d anomalie.
      Editer sur cette base aurait annule tout un lot de correctifs, et
      l ecriture aurait repondu success: true.
      C est la plus dangereuse des trois formes de lecture fausse : une reponse
      vide alerte, une ecriture fantome se detecte au snapshot, mais un fichier
      coherent avec du retard ne signale rien.
      PARADE : relire par curl sur l URL du fichier
        https://<site>/wp-content/themes/<theme>/style.css?cache-buster
      et ne se servir de read_theme_file que pour un coup d oeil, jamais comme
      base d une reecriture.

   5. VERIFIER UNE ECRITURE : le signal fiable est l apparition d un NOUVEAU
      snapshot (respira_list_snapshots sur le post vise), pas le contenu rendu
      par extract_builder_content — dont la reponse peut etre tronquee et
      laisser croire a un changement qui n a pas eu lieu. En cas de timeout,
      toujours croiser les deux avant de conclure, et ne jamais rejouer une
      ecriture a l aveugle.

   4. Sections et colonnes sont des conteneurs FLEX avec des gap :
        .et_pb_section  -> flex column, row-gap 60px
        .et_flex_column -> flex column, row-gap 30px
      Ces gap s ajoutent aux marges de la maquette. Un display:inline-block sur
      un enfant de colonne n a aucun effet (les enfants de flex sont blockifies).
      6. VERIFIER UNE ECRITURE DE FICHIER : relire le fichier depuis un ONGLET
      NEUF, jamais depuis le formulaire de l editeur de themes. Le navigateur
      restaure la saisie et affiche le contenu attendu meme si l enregistrement
      a echoue. Deux ecritures dans functions.php ont ainsi semble passer alors
      que le fichier etait inchange sur le disque (POST contenant des balises
      script, bloque en silence : pare-feu Hostinger ou limite de taille).

   7. THEME ENFANT : functions.php doit declarer DEUX feuilles, le parent
      (get_template_directory_uri) ET l enfant (get_stylesheet_directory_uri,
      en dependance de divi-parent-style). Sans la seconde, WordPress ne charge
      jamais ce fichier et tout le CSS parait absent.

   8. .preuve utilise position:relative + top:46px, PAS transform. Le script
      d apparition pose .reveal/.vu sur ce meme element, et .reveal.vu
      {transform:none} (0,2,0) ecrase translateY(46px) (0,1,0). Deux effets,
      deux proprietes. NE PAS remettre transform sur .preuve.
      .et_pb_section.bande {padding-top:46px} reserve l espace en dessous.

   9. DEUX BLOCS JS ecrivent dans #statut, dans le module Code de la section
      CTA de la page 79277 : le bloc 1 (statut) vient de la maquette, le bloc 5
      (jours feries, calcul Meeus/Butcher) a ete ajoute A COTE plutot que
      fusionne dedans, parce que la session qui l a ecrit ne pouvait pas relire
      le script en clair (filtre de contenu cote outil) et refusait de
      reecrire a l aveugle. Le bloc 5 ne surcharge #statut et #dot que les
      jours feries, et se reapplique toutes les 60 s. A fusionner dans la
      condition du bloc 1 des que quelqu un peut lire le module en clair.

  10. MISE EN LIGNE : purger LiteSpeed ET le CDN Hostinger. Les deux caches
      sont independants ; purger l un laisse l autre servir l ancienne page.
   
   ========================================================================== */


/* ==========================================================================
   ACCUEIL V2 - BASE
   Styles de composants. Aucune de ces classes n'existe ailleurs sur le site.
   ========================================================================== */

/* typographie */
.label{font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin:0}
/* Divi 5 pose .preset--module--divi-text--default .et_pb_text_inner h1
   { color: var(--gcid-heading-color) !important } : seul !important passe. */
.hero .et_pb_text_inner h1.xxl{color:#fff!important}
.xxl{font-weight:600;font-size:clamp(3rem,9.5vw,7.2rem);line-height:.92;letter-spacing:-.05em;color:#fff;margin:0}
.xxl u{text-decoration:none;opacity:.5}
.hero-sub{font-size:clamp(1.05rem,1.9vw,1.28rem);max-width:44ch;margin-top:26px;opacity:.85;line-height:1.5;color:#fff}
.hero h2,.micro h2,.cta h2{color:#fff}

/* ---- raccord Divi 5 : boutons cote a cote ----
   Divi 5 rend .et_pb_column en flex vertical avec gap:30px. Un enfant de
   flex est blockifie : display:inline-block sur l enveloppe du bouton n a
   aucun effet. On bascule la colonne en ligne et on renvoie chaque module
   non-bouton sur sa propre ligne (flex-basis 100%). */
.hero-act .et_pb_column,.cta-b .et_pb_column,.tarifs-cta .et_pb_column{
  flex-flow:row wrap;align-items:center;column-gap:12px;row-gap:26px}
.hero-act .et_pb_column>*,.cta-b .et_pb_column>*,.tarifs-cta .et_pb_column>*{flex:0 0 100%}
.hero-act .et_pb_column>.et_pb_button_module_wrapper,
.cta-b .et_pb_column>.et_pb_button_module_wrapper,
.tarifs-cta .et_pb_column>.et_pb_button_module_wrapper{flex:0 0 auto;margin:0}
.cta-b .et_pb_column{justify-content:center}

/* pastille de statut */
.statut{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:8px 16px 8px 12px;border:1px solid rgba(255,255,255,.3);border-radius:100px;font-size:14.5px;color:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 4px rgba(74,222,128,.22)}

/* ---- carte de preuve : debord par transform, non par marge negative ----
   .socle porte le fond bleu (reglage Divi, pas de regle CSS). La carte
   descend de 46px et deborde sur le fond clair. .bande reprend le role du
   .apres-socle de la maquette : son padding-top rend les 46px occupes. */
/* Debord : position/top au lieu de transform, sinon .reveal.vu (0,2,0)
   ecrase translateY sur le meme element. Deux effets, deux proprietes. */
.preuve{position:relative;top:46px;border-radius:3px}
.et_pb_section.bande{padding-top:46px}

.preuve,.preuve .et_pb_row{display:grid!important;grid-template-columns:1.25fr 1fr 1fr 1fr}
.preuve .et_pb_column{width:100%!important;margin:0!important;padding:30px 28px;border-left:1px solid rgba(11,11,18,.13)}
.preuve .et_pb_column:first-child{border-left:0}
.pv b{display:block;font-weight:600;font-size:2.35rem;line-height:1;letter-spacing:-.045em;color:#0B0B12}
.pv span{display:block;font-size:13px;color:#6E6E7A;margin-top:9px;line-height:1.4}
.pv .etl{color:#FFB020;font-size:15px;letter-spacing:3px;margin-bottom:9px}
.pv-fort b{color:#0E04CC}

/* ---- prestations : le bloc .pr de la maquette, recable sur la colonne Divi ---- */
.presta{display:grid!important;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(11,11,18,.13);margin-top:46px!important}
.presta .et_pb_column{width:100%!important;margin:0!important;padding:36px 34px 36px 0;border-right:1px solid rgba(11,11,18,.13)}
.presta .et_pb_column:nth-child(n+2){padding-left:34px}
.presta .et_pb_column:last-child{border-right:0;padding-right:0}
.presta .et_pb_column p{color:#6E6E7A;font-size:15.5px;margin-top:13px;line-height:1.62}
.presta .et_pb_column a{display:inline-block;margin-top:20px;color:#0E04CC;font-weight:600;font-size:15px;text-decoration:none;border-bottom:1.5px solid rgba(14,4,204,.28);padding-bottom:2px}
.presta .et_pb_column a:hover{border-color:#0E04CC}
.presta .ph{overflow:hidden}


/* ---- raccord Divi 5 : rythme vertical ----
   Les sections Divi 5 sont en flex colonne avec row-gap:60px, qui s ajoute
   aux marges de la maquette (ecart mesure titre/cartes : 106px au lieu de
   46px). On neutralise le gap sur les seules sections concernees et on
   laisse les marges faire le travail. */
.et_pb_section:has(> .presta),.et_pb_section:has(> .avis-g){row-gap:0}
.presta .et_pb_column{row-gap:0}
.entete{margin-bottom:0}

/* ---- raccord Divi 5 : entete de section, bouton aligne sur la baseline ---- */
.entete{align-items:flex-end}
.entete .et_pb_column:last-child{align-items:flex-end;text-align:right}
.entete .et_pb_column:last-child .et_pb_button_module_wrapper{margin:0}

/* ---- section DSH ---- */
.micro-in{display:grid!important;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.micro-in .et_pb_column{width:100%!important;margin:0!important}
.micro p{opacity:.82;max-width:50ch;font-size:16.5px;color:#fff}
.gratuit{display:inline-block;margin-top:24px;background:#E1000F;color:#fff;font-weight:600;font-size:13px;letter-spacing:.13em;text-transform:uppercase;padding:9px 18px;border-radius:100px}
.lentille{aspect-ratio:1;border-radius:50%;position:relative;overflow:hidden;background:#0A0230;border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 10px rgba(255,255,255,.03),0 24px 60px rgba(0,0,0,.42)}
.lentille img{width:100%;height:100%;object-fit:cover;display:block}
.lentille .vide{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.7;padding:26px;background:radial-gradient(circle at 44% 40%,rgba(225,0,15,.22),transparent 52%),#0A0230}
.lentille::before,.lentille::after{content:"";position:absolute;border-radius:50%;pointer-events:none;z-index:2}
.lentille::before{inset:4%;border:1px solid rgba(255,255,255,.22)}
.lentille::after{inset:0;box-shadow:inset 0 0 60px 6px rgba(10,2,48,.62);border:0}
.lentille .mire{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:50%;background:linear-gradient(to right,transparent calc(50% - .5px),rgba(255,255,255,.14) 50%,transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),rgba(255,255,255,.14) 50%,transparent calc(50% + .5px));-webkit-mask:radial-gradient(circle,#000 62%,transparent 63%);mask:radial-gradient(circle,#000 62%,transparent 63%)}
.lentille figcaption{position:absolute;left:0;right:0;bottom:9%;z-index:4;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ---- tarifs : liste de lignes ---- */
.carte-tarifs{margin-top:42px;border-top:1px solid rgba(11,11,18,.13);max-width:760px}
.lg{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 18px;padding:20px 0;border-bottom:1px solid rgba(11,11,18,.13)}
.lg-nom{font-weight:600;font-size:1.06rem;letter-spacing:-.015em;flex:none}
.lg-pointille{flex:1 1 40px;border-bottom:1px dotted rgba(11,11,18,.28);transform:translateY(-5px);min-width:24px}
.lg-prix{font-weight:600;font-size:1.32rem;letter-spacing:-.03em;flex:none;font-variant-numeric:tabular-nums}
.lg-prix i{font-style:normal;font-weight:400;font-size:.78em;color:#6E6E7A;margin-right:5px}
.lg-note{flex:0 0 100%;order:9;color:#6E6E7A;font-size:14px;margin-top:7px;line-height:1.5}
.lg-offert{background:rgba(14,4,204,.045);margin:0 -20px;padding:20px;border-bottom:0;border-radius:3px}
.lg-offert .lg-nom,.lg-offert .lg-prix{color:#0E04CC}
.lg-offert .lg-pointille{border-bottom-color:rgba(14,4,204,.3)}
.tarifs-pied{margin-top:34px;max-width:760px}
.tarifs-pied p{color:#6E6E7A;font-size:15.5px}
.tarifs-pied .fid{margin-top:12px;font-size:14.5px}
.tarifs-pied .fid b{color:#0B0B12;font-weight:600}

/* ---- avis ---- */
.avis-g{display:grid!important;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px!important}
.avis-g .et_pb_column{width:100%!important;margin:0!important}
.av{background:#fff;border:1px solid rgba(11,11,18,.13);border-radius:3px;padding:30px 28px;height:100%}
.av .et{color:#FFB020;letter-spacing:2.5px;font-size:14px}
.av p{margin:15px 0 20px;font-size:15.5px;line-height:1.6}
.av cite{font-style:normal;font-weight:600;font-size:14.5px}

/* ---- acces ---- */
.tr{display:grid!important;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:start}
.tr .et_pb_column{width:100%!important;margin:0!important}
.tr-adresse{font-style:normal}
.tr dt{margin-top:26px;color:#0E04CC}
.tr dt:first-child{margin-top:0}
.tr dd{margin:8px 0 0;font-size:16.5px;line-height:1.6}
.tr dd a{font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(14,4,204,.28);color:#0B0B12}

/* ---- faq ---- */
.faq .et_pb_toggle{border:0;border-bottom:1px solid rgba(11,11,18,.13);background:transparent!important;padding:25px 46px 25px 0}
.faq .et_pb_toggle_title{font-family:'Poppins',sans-serif;font-weight:600;font-size:1.1rem;letter-spacing:-.015em;color:#0B0B12}
.faq .et_pb_toggle_content{color:#6E6E7A;font-size:16px;max-width:72ch}

/* ---- emplacements photo ---- */
.ph{overflow:hidden;min-height:0;background:#E4E4DF;border:1px dashed #B9B9B0;border-radius:3px;display:grid;place-items:center;text-align:center;color:#8A8A80;font-size:12px;letter-spacing:.1em;text-transform:uppercase;line-height:1.6;padding:14px}
.ph em{display:block;text-transform:none;letter-spacing:0;font-size:11.5px;opacity:.8;margin-top:5px}
.presta .ph{aspect-ratio:4/3;margin-bottom:22px}
.bande .ph{aspect-ratio:3/1}
.ph em{font-size:10.5px}
.todo{display:inline-block;background:#FFF3D1;border:1px dashed #C9A227;color:#7A5C00;font-size:11.5px;font-weight:600;letter-spacing:.06em;padding:3px 9px;border-radius:2px;text-transform:uppercase}
.att{border:1px dashed #C9A227!important;background:#FFFCF2!important}

/* ---- responsive ---- */
@media (max-width:980px){
  .preuve,.preuve .et_pb_row{grid-template-columns:1fr 1fr}
  .preuve .et_pb_column{border-top:1px solid rgba(11,11,18,.13)}
  .preuve .et_pb_column:nth-child(odd){border-left:0}
  .preuve .et_pb_column:nth-child(-n+2){border-top:0}
  .presta,.avis-g,.tr,.micro-in{grid-template-columns:1fr;gap:0}
  .presta .et_pb_column{border-right:0;border-bottom:1px solid rgba(11,11,18,.13);padding:26px 0!important}
  .presta .et_pb_column:last-child{border-bottom:0}
  .lg{gap:0 10px;padding:17px 0}
  .lg-nom{font-size:1rem}
  .lg-prix{font-size:1.2rem;margin-left:auto}
  .lg-offert{margin:0 -14px;padding:18px 14px}
  .avis-g{gap:14px}
  .tr{gap:40px}
  .micro-in{gap:44px}
  .lentille{max-width:300px;margin:0 auto}
}

/* ==========================================================================
   ACCUEIL V2 - ANIMATIONS
   Dix effets repris de maquette-cebazat-v2.html, exclusivement en transform
   et opacity. Le bloc .pr de la maquette est recable sur
   .presta .et_pb_column, son equivalent dans le DOM Divi.
   ========================================================================== */

/* 1 - apparition au scroll */
.reveal{opacity:0;transition:opacity .45s ease}
.reveal.vu{opacity:1}




/* 5 - en-tete qui se densifie au scroll (inerte tant que .head n'est pas
   pose sur l'en-tete Theme Builder) */
.head{transition:box-shadow .3s,padding .3s}
.head.dense{box-shadow:0 4px 22px rgba(7,1,63,.28)}
.head.dense .head-in{padding-top:9px;padding-bottom:9px}
.head-in{transition:padding .3s}

/* 6 - prestations : la carte se souleve, le lien avance, l'image zoome */
.presta .et_pb_column a{position:relative;transition:letter-spacing .25s,border-color .18s}
.presta .et_pb_column:hover a{letter-spacing:.02em;border-color:#0E04CC}

/* 7 - carte de preuve : la colonne survolee se detache */
.preuve .et_pb_column{transition:background .28s}
.preuve .et_pb_column:hover{background:#fff}

/* 8 - avis : elevation douce */
.av{transition:box-shadow .3s}
.av:hover{box-shadow:0 14px 34px rgba(7,1,63,.10)}


/* 10 - soulignement anime sur les liens du bloc acces */
.tr dd a{background-image:linear-gradient(#0E04CC,#0E04CC);background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;border-bottom:0;padding-bottom:2px;transition:background-size .35s cubic-bezier(.22,.7,.3,1)}
.tr dd a:hover{background-size:100% 2px}

/* accessibilite : tout se coupe */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transition:none!important}
  .preuve .et_pb_column,.av,.tr dd a,.presta .et_pb_column a{transition:none!important}
  .head,.head-in{transition:none!important}
}


/* ==========================================================================
   RACCORDS DIVI 5 — releves sur le DOM rendu de la page 79277
   ========================================================================== */

/* -- fuite du link_color --
   Divi 5 applique au preset de module texte :
   .preset--module--divi-text--default .et_pb_text_inner a { color: #f25c54 }
   (valeur de et_ai_layout_primary_color, reste de generation IA), en (0,2,1).
   On repasse au bleu de charte avec une specificite superieure. */
.presta .et_pb_column .et_pb_text_inner a,
.tr .et_pb_column .et_pb_text_inner a,
.faq .et_pb_toggle_content a{
  color:#0E04CC;text-decoration:none;
  border-bottom:1.5px solid rgba(14,4,204,.28);padding-bottom:2px}
.presta .et_pb_column .et_pb_text_inner a:hover,
.tr .et_pb_column .et_pb_text_inner a:hover{border-bottom-color:#0E04CC}

/* -- H3 des prestations --
   Ce sont des modules divi/heading (.et_pb_module_header), pas des <h3> de
   texte : la classe .md de la maquette ne les atteignait pas. Le reglage de
   titre global les mettait a 50px. */
.presta .et_pb_heading_container h3.et_pb_module_header{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:21px;
  line-height:1.28;letter-spacing:-.02em;color:#0B0B12}
@media (max-width:980px){.presta .et_pb_heading_container h3.et_pb_module_header{font-size:20px}}
@media (max-width:767px){.presta .et_pb_heading_container h3.et_pb_module_header{font-size:19px}}

/* -- liens des prestations alignes en bas --
   Les colonnes sont deja a hauteur egale (items de grille). Le lien vit dans
   un <p> a l interieur du module texte, pas en enfant direct de la colonne :
   on fait remplir le module texte, puis on pousse son dernier <p> en bas. */
.presta .et_pb_column>.et_pb_text:last-child{flex:1 1 auto;display:flex;flex-direction:column}
.presta .et_pb_column>.et_pb_text:last-child .et_pb_text_inner{display:flex;flex-direction:column;flex:1 1 auto}
.presta .et_pb_column>.et_pb_text:last-child .et_pb_text_inner>p:last-child{margin-top:auto;margin-bottom:0}

/* -- carte Google : contrainte dans la colonne -- */
.tr iframe{display:block;width:100%!important;max-width:100%;border:0;border-radius:3px}

/* ==========================================================================
   RACCORDS DIVI 5 — suite (FAQ, CTA, boutons)
   ========================================================================== */

/* -- FAQ : le titre actif et les chevrons prennent le rouge saumon du
   preset (#f25c54). Fond des items deja transparent, on garde les filets. -- */
.faq .et_pb_toggle{background:transparent!important;border:0;border-bottom:1px solid rgba(11,11,18,.13)}
.faq .et_pb_toggle_open .et_pb_toggle_title,
.faq .et_pb_toggle_title{color:#0B0B12!important}
.faq .et_pb_toggle_open .et_pb_toggle_title{color:#0E04CC!important}
.faq .et_pb_toggle_title::before,.faq .et_pb_toggle_title::after,
.faq .et_pb_toggle_open .et_pb_toggle_title::before{color:#0E04CC!important}

/* -- CTA final : section centree, paragraphe blanc a 82 % -- */
.cta{text-align:center}
.cta .et_pb_text_inner,.cta .et_pb_text_inner p{color:#fff!important;text-align:center}
.cta .et_pb_text_inner p{opacity:.82;font-size:1.1rem;margin-top:18px}
.cta h2{text-align:center}

/* -- boutons : la charte de la maquette, distinguee par la cible du lien.
   Divi n a pas retenu les couleurs posees en attributs de module. -- */
.hero-act a.et_pb_button:not([href^="tel:"]),
.cta-b a.et_pb_button:not([href^="tel:"]),
.micro a.et_pb_button{
  background:#fff!important;color:#0E04CC!important;border:1.5px solid #fff!important}
.hero-act a.et_pb_button[href^="tel:"],
.cta-b a.et_pb_button[href^="tel:"]{
  background:transparent!important;color:#fff!important;border:1.5px solid rgba(255,255,255,.42)!important}
.hero-act a.et_pb_button[href^="tel:"]:hover,
.cta-b a.et_pb_button[href^="tel:"]:hover{background:#fff!important;color:#0E04CC!important;border-color:#fff!important}
.tarifs-cta a.et_pb_button:not([href^="tel:"]){
  background:#0E04CC!important;color:#fff!important;border:1.5px solid #0E04CC!important}
.entete a.et_pb_button,
.tarifs-cta a.et_pb_button[href^="tel:"]{
  background:transparent!important;color:#0B0B12!important;border:1.5px solid #0B0B12!important}
.entete a.et_pb_button:hover,
.tarifs-cta a.et_pb_button[href^="tel:"]:hover{background:#0B0B12!important;color:#F2F2EF!important}
a.et_pb_button{border-radius:100px!important;font-weight:600;font-size:15.5px;padding:16px 30px!important}
a.et_pb_button:after,a.et_pb_button:before{display:none!important}

/* -- H2 de section : ce sont des modules divi/heading (.et_pb_module_header),
   la classe .xl de la maquette ne les atteint pas. Ils sortaient a 50px avec
   un padding-bottom de 10px qui faussait l alignement de .entete. -- */
.et_builder_inner_content .et_pb_heading_container h2.et_pb_module_header{
  font-family:'Poppins',sans-serif;font-weight:600;font-size:56px;line-height:1;
  letter-spacing:-.04em;margin:0;padding:0}
@media (max-width:980px){.et_builder_inner_content .et_pb_heading_container h2.et_pb_module_header{font-size:42px}}
@media (max-width:767px){.et_builder_inner_content .et_pb_heading_container h2.et_pb_module_header{font-size:32px}}

/* -- .entete : le module titre porte margin-bottom:10px, qui decalait le bas
   de la colonne sous la derniere ligne du H2. Aligne le bouton a la baseline. -- */
.entete .et_pb_module.et_pb_heading{margin-bottom:0!important}

/* -- bande photo : la source est en 4:3, l emplacement attend du 3:1.
   On recadre par object-fit plutot que de deformer. object-position pousse
   le cadrage vers le bas pour garder le comptoir et son logo. -- */
.bande-photo{margin:0;aspect-ratio:3/1;overflow:hidden;border-radius:3px}
.bande-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 62%}
@media (max-width:767px){.bande-photo{aspect-ratio:16/9}}

/* ==========================================================================
   HERO — version resserree (valeurs validees)
   Les paddings de section poses en attributs de module Divi ne sont pas
   honores (les sections sortaient a 54px haut ET bas). On les impose ici :
   .et_pb_section.hero est en (0,2,0), il passe devant le .et_pb_section_N
   de Divi qui est en (0,1,0).
   ========================================================================== */
.et_pb_section.hero{padding-top:52px;padding-bottom:0}
.et_pb_section.socle{padding-top:40px;padding-bottom:0}
@media (max-width:767px){
  .et_pb_section.hero{padding-top:34px}
  .et_pb_section.socle{padding-top:30px}
}

/* H1 : dans un module texte, pas un divi/heading. (0,3,1) suffit. */
.hero .et_pb_text_inner h1.xxl{
  font-size:clamp(2.7rem,7.4vw,5.6rem);line-height:.94;letter-spacing:-.045em}

/* rythme interne du hero : on coupe le row-gap de la colonne flex Divi
   et on rend la main aux marges. */
.hero-act .et_pb_column{row-gap:0}
.hero-sub{margin-top:18px}
.hero-act .et_pb_column>.et_pb_button_module_wrapper{margin-top:24px}
.statut{margin-top:18px}

/* -- lentille DSH : photo reelle du bulbe --
   La source est en 4:3 et le bulbe n est pas centre : il se trouve a ~35% en
   largeur et ~78% en hauteur. Un object-fit:cover par defaut le placerait a
   30%/78% du cercle, donc en plein dans le vignettage. On le ramene au centre
   par translation, puis on grossit — ce qui sert aussi le propos : une lentille
   de microscope doit donner une vue agrandie.
   L image reste sous .mire (z-index 3), l anneau et le vignettage (z-index 2). */
.lentille .vide:has(img){padding:0;background:none;display:block}
.lentille .vide img{width:100%;height:100%;object-fit:cover;
  object-position:0% 50%;transform:scale(2.4) translate(0,-28%)}

/* -- emplacements photo remplis : on neutralise l habillage de la mire -- */
.ph:has(img){background:none;border:0;padding:0;display:block}
.ph img{display:block;width:100%;height:100%;object-fit:cover}

/* ==========================================================================
   SURVOL DES BOUTONS A CONTOUR
   Le libelle est un noeud texte direct du <a> (rien ne le verrouille), mais
   les pseudos ::before/::after portent le chevron d icone Divi (content:"5")
   et heritent de la couleur : on les cible aussi, sinon le glyphe reste sombre.
   ========================================================================== */

/* .b-noir — contour noir sur fond clair */
.entete a.et_pb_button:hover,
.tarifs-cta a.et_pb_button[href^="tel:"]:hover{
  background:#0B0B12!important;background-color:#0B0B12!important;border-color:#0B0B12!important}
.entete a.et_pb_button:hover,
.entete a.et_pb_button:hover::before,
.entete a.et_pb_button:hover::after,
.tarifs-cta a.et_pb_button[href^="tel:"]:hover,
.tarifs-cta a.et_pb_button[href^="tel:"]:hover::before,
.tarifs-cta a.et_pb_button[href^="tel:"]:hover::after{color:#F2F2EF!important}

/* .b-vide — contour blanc sur fond bleu */
.hero-act a.et_pb_button[href^="tel:"]:hover,
.cta-b a.et_pb_button[href^="tel:"]:hover{
  background:#FFFFFF!important;background-color:#FFFFFF!important;border-color:#FFFFFF!important}
.hero-act a.et_pb_button[href^="tel:"]:hover,
.hero-act a.et_pb_button[href^="tel:"]:hover::before,
.hero-act a.et_pb_button[href^="tel:"]:hover::after,
.cta-b a.et_pb_button[href^="tel:"]:hover,
.cta-b a.et_pb_button[href^="tel:"]:hover::before,
.cta-b a.et_pb_button[href^="tel:"]:hover::after{color:#0E04CC!important}

/* ==========================================================================
   EN-TETE ET PIED DE PAGE (layouts globaux 79175 / 79176)
   Traites en CSS via les enveloppes .et-l--header / .et-l--footer, pour ne
   pas ecrire dans des layouts qui s appliquent aussi a la page d accueil
   en production.
   ========================================================================== */

/* -- en-tete : fond de charte + position collante -- */
.et-l--header{position:sticky;top:0;z-index:80}
.et-l--header .et_pb_section{background-color:#0E04CC!important}
.et-l--header .et_pb_section,.et-l--header .et_pb_menu,
.et-l--header .et_pb_menu a{color:#fff!important;font-family:'Poppins',sans-serif}
.et-l--header .et_pb_menu a{opacity:.9}
.et-l--header .et_pb_menu a:hover{opacity:1}
@media (max-width:960px){.et-l--header .head-tel{display:none}}

/* -- pied de page : bleu nuit #07013F de la charte (celui de la section DSH).
   Descente voulue : CTA en bleu vif, puis pied plus sombre pour fermer. -- */
/* Divi genere en (0,4,0) !important :
   .et-l--footer > .et_builder_inner_content .et_pb_section.et_pb_section
   L ecriture dans le layout est bloquee par le reglage Respira, on passe donc
   au-dessus en (0,5,0). */
.et-l--footer > .et_builder_inner_content .et_pb_section.et_pb_section.et_pb_section{
  background-color:#07013F!important}
.et-l--footer *{font-family:'Poppins',sans-serif}

/* halo retire du bouton */
.et-l--footer .et_pb_button{box-shadow:none!important}

/* le module texte  facebook  heritait de la couleur globale rgb(60,58,71) */
.et-l--footer .et_pb_text,.et-l--footer .et_pb_text_inner,
.et-l--footer .et_pb_text_inner p{color:rgba(255,255,255,.66)!important}

/* liens lisibles sur le bleu */
.et-l--footer a:not(.et_pb_button),
.et-l--footer .et_pb_text a{color:rgba(255,255,255,.66)!important}
.et-l--footer a:not(.et_pb_button):hover,
.et-l--footer .et_pb_text a:hover{color:#FFFFFF!important}

/* ==========================================================================
   EN-TETE — mise en page (layout 79175 reconstruit)
   Les largeurs de colonne posees en attributs ne sont pas retenues : les
   colonnes sortent en 24/24. On les remet en flex ici.
   ========================================================================== */
.head-in{display:flex!important;align-items:center;justify-content:space-between;gap:18px}
.head-in .et_pb_column{width:auto!important;margin:0!important;row-gap:0}
.head-in .et_pb_column:last-child{flex-direction:row;align-items:center;gap:16px}

.marque{display:block;text-decoration:none;font-family:'Poppins',sans-serif;
  font-weight:600;font-size:16px;letter-spacing:-.02em;line-height:1.1;color:#fff!important}
.marque i{display:block;font-style:normal;font-size:10.5px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;opacity:.68;margin-top:3px}

.head-tel{text-decoration:none;font-family:'Poppins',sans-serif;font-weight:600;
  font-size:15.5px;white-space:nowrap;color:#fff!important}

.head a.et_pb_button{background:#FFFFFF!important;color:#0E04CC!important;
  border:0!important;border-radius:100px!important;padding:11px 22px!important;
  font-size:14.5px!important;font-weight:600}
.head a.et_pb_button:hover{background:#F2F2EF!important;color:#0E04CC!important}

@media (max-width:960px){.head-tel{display:none}}

/* -- menu de l en-tete masque en attendant Tarifs / Gerzat / Riom --
   Une seule entree (« Accueil »), sur la page qu elle pointe, avec la marque
   qui fait deja lien : sans utilite aujourd hui. Le module reste en place
   dans le layout 79175, il redeviendra pertinent a quatre entrees. -- */
.head .et_pb_menu{display:none}

/* ==========================================================================
   MOBILE — teste a 360 / 390 / 414 px dans un iframe a la largeur cible
   Cause du debord : les lignes Divi n ont aucun padding lateral, alors que
   le .wrap de la maquette porte padding:0 26px.
   ========================================================================== */
@media (max-width:980px){

  /* 1. padding lateral, equivalent du .wrap de la maquette */
  .et_builder_inner_content .et_pb_row{
    padding-left:26px!important;padding-right:26px!important;
    width:100%!important;max-width:100%!important}

  /* la carte de preuve est une carte : elle se decale par marge, pas par
     padding, sinon son fond clair irait jusqu au bord */
  /* la regle generique ci-dessus est en (0,2,0) : on repasse devant */
  .et_builder_inner_content .et_pb_row.preuve{
    padding-left:0!important;padding-right:0!important;
    margin-left:26px!important;margin-right:26px!important;
    width:auto!important;max-width:none!important}
  .et_builder_inner_content .et_pb_row.preuve .et_pb_column{padding:22px 18px}

  /* garde-fou : un widget tiers (avis Google) et le zoom de la lentille
     depassent le viewport. overflow-x:clip coupe sans creer de conteneur
     de defilement, contrairement a hidden. */
  .et-l--body,.et_builder_inner_content{overflow-x:clip}

  /* 2. entete de section : titre puis bouton, en pleine largeur */
  .entete{flex-direction:column;align-items:stretch!important;gap:18px}
  .entete .et_pb_column{width:100%!important}
  .entete .et_pb_column:last-child{align-items:stretch;text-align:left}
  .entete a.et_pb_button{display:block!important;width:100%;text-align:center;
    border-radius:100px!important;white-space:nowrap}

  /* le bouton d entete doit remplir : la colonne ET son enveloppe de module
     doivent passer en pleine largeur, sinon le <a> se cale sur son contenu */
  .entete .et_pb_column:last-child,
  .entete .et_pb_column:last-child .et_pb_button_module_wrapper{
    width:100%!important;display:block!important;margin:0!important}
  .entete .et_pb_column .et_pb_button_module_wrapper a.et_pb_button{
    width:100%!important;box-sizing:border-box;display:block!important}

  /* la carte sortait a 368px dans une colonne de 323 : on contraint toute
     la chaine, pas seulement l iframe */
  .tr .et_pb_column,.tr .et_pb_code,.tr .et_pb_code_inner{
    width:100%!important;max-width:100%!important}

  /* 4. carte Google et tout media : jamais plus large que la colonne */
  .tr iframe,.et_builder_inner_content img{max-width:100%!important}

  /* le widget d avis Google ne se contraint pas tout seul */
  .et_builder_inner_content [class^="rpi-"],.et_builder_inner_content [class*=" rpi-"],
  .et_builder_inner_content [class^="grw-"],.et_builder_inner_content [class*=" grw-"]{
    max-width:100%!important}

  /* 5. section Prestations : le vide avant le sur-titre venait du cumul
     padding de section + marge de la ligne d entete */
  .et_pb_section:has(> .entete){padding-top:48px!important}
  .entete{margin-top:0!important}
}

/* 3. bouton de l en-tete : libelle sur une seule ligne sur petit ecran */
@media (max-width:600px){
  .head a.et_pb_button{padding:9px 16px!important;font-size:13px!important;white-space:nowrap}
  .marque{font-size:15px}
  .head-in{gap:10px}
}