/*
 T h*eme Name: Twenty Twenty-Five Child BLY
 Description: Thème enfant de Twenty Twenty-Five
 Author: Bastien Lyphout
 Template: twentytwentyfive
 Version: 1.0
 Text Domain: twentytwentyfive-child-bly
 */

/* ==========================================================================
 *  CFID Solutions – feuille de style du site (thème Twenty Twenty-Five)
 *  --------------------------------------------------------------------------
 *  FICHIER      wp-content/plugins/cfid-styles/cfid.css
 *               (chargé par l'extension « CFID Styles », sur le site ET dans
 *               l'éditeur de blocs). Styles > CSS additionnel n'est plus utilisé.
 *
 *  PRÉREQUIS
 *  1. Police Montserrat installée : Éditeur > Styles > Typographie > Gérer les
 *     polices > Bibliothèque > Montserrat (graisses 300, 400, 600, 700).
 *  2. Couleurs ajoutées à la palette (Styles > Couleurs > Palette) :
 *     #EE813F (orange), #E35328 (orange foncé), #0A0503 (noir)
 *     Dégradé : linear-gradient(135deg, #EE813F 0%, #E35328 100%)
 *
 *  CLASSES À AJOUTER DANS L'ÉDITEUR
 *  (panneau de droite > Avancé > Classe(s) CSS additionnelle(s), sans le point)
 *
 *  Structure générale
 *    cfid-header          Groupe de l'en-tête (barre en pilule)
 *    cfid-container       Groupe qui centre le contenu (largeur max 1040 px)
 *    cfid-bg-grey         Groupe pleine largeur à fond gris clair
 *    cfid-bg-blue         Groupe pleine largeur à fond bleu clair
 *    cfid-gradient        Groupe à fond dégradé orange (« Nos engagements »)
 *    cfid-banner          Bloc Couverture « Besoin de renfort ? »
 *    cfid-cta             Groupe du bandeau « Un projet, une panne, une question ? »
 *    cfid-footer          Groupe du pied de page (fond noir)
 *
 *  Hero de la page d'accueil
 *    cfid-hero            Groupe (pas Couverture) qui contient tout le hero
 *    cfid-deco            Groupe vide dans le hero (cercle décoratif)
 *    cfid-hero-photo-col  Colonne de droite du hero (celle qui contient la photo)
 *    cfid-hero-photo      Bloc Image du hero (bas arrondi)
 *
 *  Hero des pages intérieures
 *    cfid-hero-page       Bloc Couverture : photo de fond + voile noir
 *
 *  Textes et éléments
 *    cfid-eyebrow         Paragraphe : petit titre orange avec tiret
 *    cfid-eyebrow--dark   en plus : version noire (sur fond orange)
 *    cfid-eyebrow--center en plus : centré
 *    cfid-lead            Paragraphe d'introduction en Light
 *    cfid-accent          Partie de titre en orange
 *    cfid-photo           Bloc Image arrondi (équipe, réalisations)
 *    cfid-tag             Paragraphe : pastille orange clair
 *    cfid-tags            Groupe (Flex) qui contient plusieurs cfid-tag
 *    cfid-more            Lien « Voir plus »
 *    cfid-contact-item    Groupe en ligne : icône + texte de contact
 *    cfid-contact-icon    Groupe qui entoure l'icône (carré blanc arrondi)
 *
 *  Cartes de l'accueil (« Un besoin, une solution »)
 *    cfid-card            Chaque Colonne des 4 cartes
 *
 *  Blocs de prestation alternés (pages intérieures)
 *    cfid-services-list   Groupe qui contient les cartes (avec cfid-container)
 *    cfid-service         Bloc Colonnes : carte blanche photo + texte
 *    cfid-service--reverse en plus : texte à gauche, photo à droite
 *    cfid-service-photo-col  Colonne de la photo
 *    cfid-service-body    Colonne du texte (cocher « Centrer verticalement »)
 *    cfid-service-subtitle   Paragraphe : sous-titre orange italique
 *    cfid-service-text    Paragraphe : texte descriptif
 *    cfid-label           Paragraphe : petit libellé en capitales
 *                         (« NOS RÉALISATIONS : »)
 *
 *  FAQ
 *    cfid-faq             Groupe qui contient des blocs « Détails » (accordéon)
 *
 *  Carrousel « Ils nous font confiance »
 *    Pas de classe : coller le HTML du carrousel dans un bloc
 *    « HTML personnalisé » (classes carousel-… incluses plus bas ;
 *    une diapositive = un logo).
 *
 *  Boutons (à mettre sur chaque bloc Bouton, pas sur le conteneur)
 *    (aucune classe)      Bouton orange plein
 *    cfid-btn-outline     Contour blanc, fond transparent
 *    cfid-btn-white       Fond blanc, texte orange
 *
 *  NOTES
 *  - Les règles utilisent le préfixe :root pour passer devant les styles du
 *    thème. WordPress remet à 0 les marges des enfants d'une mise en page
 *    flex (Colonnes), d'où certains !important.
 *  - L'en-tête est positionné en absolu : chaque page doit commencer par un
 *    hero (accueil ou page intérieure) pour que la barre flotte dessus.
 *
 *  SOMMAIRE
 *    1. Variables                      9. Bande dégradée et bandeaux
 *    2. Base : texte et titres        10. Photos et pastilles
 *    3. Petit titre avec tiret        11. Blocs de prestation alternés
 *    4. Boutons                       12. FAQ
 *    5. En-tête                       13. Carrousel
 *    6. Hero d'accueil                14. Pied de page
 *    7. Hero de page                  15. Tablette et mobile
 *    8. Cartes de l'accueil           16. Accessibilité
 *  ========================================================================== */


/* ==========================================================================
 *  1. Variables
 *  ========================================================================== */
:root {
  /* Couleurs */
  --cfid-orange: #EE813F;
  --cfid-orange-dark: #E35328;
  --cfid-black: #0A0503;
  --cfid-white: #FFFFFF;
  --cfid-offwhite: #FFFBF8;     /* fond de la barre de navigation */
  --cfid-peach: #FCF2EC;        /* fond des cartes */
  --cfid-peach-strong: #FDE3D3; /* fond des pastilles */
  --cfid-blue-light: #E9F1F9;   /* bande bleu clair (à vérifier dans Figma) */
  --cfid-grey: #D9D9D9;         /* emplacements photo et points inactifs */
  --cfid-grey-light: #F5F3F1;   /* fond des sections grises (estimé) */
  --cfid-line: rgba(10, 5, 3, 0.12); /* filets fins (FAQ) */
  --cfid-text-soft: rgba(10, 5, 3, 0.8); /* texte courant atténué */
  --cfid-gradient: linear-gradient(135deg, #EE813F 0%, #E35328 100%);

  /* Typographie */
  --cfid-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Formes et mise en page */
  --cfid-container: 1040px;
  --cfid-radius-xl: 64px;
  --cfid-radius-lg: 32px;
  --cfid-pill: 999px;
  --cfid-ease: 0.2s ease;                  /* durée des survols */
  --cfid-hero-pt: clamp(7rem, 12vw, 9rem); /* espace réservé à l'en-tête */
}


/* ==========================================================================
 *  2. Base : texte et titres
 *  ========================================================================== */
:root body {
  font-family: var(--cfid-font);
  font-weight: 400;
  line-height: 1.5;
  color: var(--cfid-black);
}

:root :is(h1, h2, h3, h4, h5, h6),
:root .wp-block-heading {
  font-family: var(--cfid-font);
  font-weight: 700;
  line-height: 1.15;
}

:root h1 { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.5rem); line-height: 1.12; }
:root h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
:root h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); }

:root strong,
:root b { font-weight: 700; }

.cfid-lead {
  font-weight: 300;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.45;
}

.cfid-accent { color: var(--cfid-orange); }

/* Conteneur centré */
.cfid-container {
  width: 100%;
  max-width: var(--cfid-container);
  margin-inline: auto;
  padding-inline: 1.5rem;
  box-sizing: border-box;
}

/* Fonds de section */
.cfid-bg-grey { background: var(--cfid-grey-light); }
.cfid-bg-blue { background: var(--cfid-blue-light); }


/* ==========================================================================
 *  3. Petit titre avec tiret (« UN BESOIN, UNE SOLUTION »)
 *  ========================================================================== */
.cfid-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cfid-orange);
}

.cfid-eyebrow::before {
  content: "";
  flex: none;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

.cfid-eyebrow--center { justify-content: center; }
.cfid-eyebrow--dark { color: var(--cfid-black); }


/* ==========================================================================
 *  4. Boutons
 *  ========================================================================== */
:root .wp-block-button .wp-block-button__link {
  font-family: var(--cfid-font);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
  padding: 0.9rem 1.8rem;
  border: 2px solid transparent;
  border-radius: var(--cfid-pill);
  background: var(--cfid-orange);
  color: var(--cfid-white);
  text-decoration: none;
  transition: background-color var(--cfid-ease), color var(--cfid-ease), border-color var(--cfid-ease);
}

:root .wp-block-button .wp-block-button__link:hover,
:root .wp-block-button .wp-block-button__link:focus-visible {
  background: var(--cfid-orange-dark);
  color: var(--cfid-white);
}

/* Contour blanc, fond transparent */
:root .cfid-btn-outline .wp-block-button__link {
  background: transparent;
  border-color: var(--cfid-white);
  color: var(--cfid-white);
}
:root .cfid-btn-outline .wp-block-button__link:hover,
:root .cfid-btn-outline .wp-block-button__link:focus-visible {
  background: var(--cfid-white);
  color: var(--cfid-orange);
}

/* Fond blanc, texte orange */
:root .cfid-btn-white .wp-block-button__link {
  background: var(--cfid-white);
  border-color: var(--cfid-white);
  color: var(--cfid-orange);
}
:root .cfid-btn-white .wp-block-button__link:hover,
:root .cfid-btn-white .wp-block-button__link:focus-visible {
  background: var(--cfid-peach);
  border-color: var(--cfid-peach);
  color: var(--cfid-orange-dark);
}


/* ==========================================================================
 *  5. En-tête : barre blanche en pilule posée sur le hero
 *  ========================================================================== */
.cfid-header {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  z-index: 20;
  width: min(calc(100% - 2rem), 1035px);
  max-width: 1035px; /* passe devant la largeur de contenu du thème (≈ 645 px) */
  margin-inline: auto;
  box-sizing: border-box;
  padding-block: 0.3rem;
  padding-inline: clamp(1rem, 7vw, 5.5rem);
  background: var(--cfid-offwhite);
  border-radius: var(--cfid-pill);
  box-shadow: 0 6px 14px rgba(10, 5, 3, 0.18);
}

/* Barre d'administration WordPress (visible seulement une fois connecté) */
.admin-bar .cfid-header { top: calc(36px + 32px); }

.cfid-header .wp-block-navigation a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--cfid-black);
  text-decoration: none;
}
.cfid-header .wp-block-navigation a:hover,
.cfid-header .wp-block-navigation a:focus-visible {
  color: var(--cfid-orange);
}


/* ==========================================================================
 *  6. Hero de la page d'accueil (fond dégradé, photo à droite)
 *  ========================================================================== */
.cfid-hero {
  position: relative;
  overflow: hidden;
  padding-top: var(--cfid-hero-pt);
  background: var(--cfid-gradient);
  color: var(--cfid-white);
}

.cfid-hero > :not(.cfid-deco) {
  position: relative;
  z-index: 1;
}

.cfid-hero :is(h1, h2, p) { color: var(--cfid-white); }

/* Cercle décoratif translucide en bas à gauche */
.cfid-deco {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 12%;
  width: clamp(120px, 15vw, 190px);
  height: clamp(150px, 18vw, 226px);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0 var(--cfid-pill) var(--cfid-pill) 0;
  pointer-events: none;
}

/* La photo remonte jusqu'au bord haut du hero, derrière la barre.
 *  Sélecteur renforcé + !important : WordPress remet à 0 la marge des
 *  enfants d'une mise en page flex (Colonnes), ce qui annulait la remontée. */
:root .cfid-hero .cfid-hero-photo-col {
  align-self: flex-start;
  margin-top: calc(-1 * var(--cfid-hero-pt)) !important;
}

/* Photo : haut droit, bas en demi-cercle (ratio 4:5 comme sur la maquette) */
.cfid-hero-photo,
.cfid-hero-photo img {
  border-radius: 0 0 var(--cfid-pill) var(--cfid-pill);
}
.cfid-hero-photo { overflow: hidden; margin: 0; }
.cfid-hero-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
}


/* ==========================================================================
 *  7. Hero des pages intérieures (Couverture : photo plein cadre + voile)
 *  Classe à mettre sur le bloc Couverture : cfid-hero-page
 *  ========================================================================== */
:root .cfid-hero-page {
  position: relative;
  box-sizing: border-box;
  min-height: clamp(460px, 62vh, 620px) !important;
  padding-top: var(--cfid-hero-pt);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  align-items: flex-end;            /* contenu en bas, comme sur la maquette */
  color: var(--cfid-white);
}

/* Voile noir : opacité forcée pour rester proche de la maquette (estimée) */
:root .cfid-hero-page .wp-block-cover__background {
  background-color: var(--cfid-black) !important;
  opacity: 0.55 !important;
}

/* Contenu aligné sur le conteneur du site */
:root .cfid-hero-page .wp-block-cover__inner-container {
  width: 100%;
  max-width: var(--cfid-container);
  margin-inline: auto;
}

:root .cfid-hero-page :is(h1, h2) {
  max-width: 14em;
  color: var(--cfid-white);
}
:root .cfid-hero-page .cfid-accent { color: var(--cfid-orange); }

:root .cfid-hero-page p { color: var(--cfid-white); }
:root .cfid-hero-page .cfid-lead {
  max-width: 34em;
  font-weight: 300;
}


/* ==========================================================================
 *  8. Cartes de l'accueil (Conception, Fabrication, Installation, Dépannage)
 *  ========================================================================== */
.cfid-card {
  box-sizing: border-box;
  padding: clamp(1.25rem, 2.2vw, 1.9rem);
  background: var(--cfid-peach);
  border-radius: var(--cfid-radius-lg);
}

.cfid-card :is(img, svg) { width: 64px; height: auto; }
.cfid-card h3 { margin: 1.2rem 0 1rem; }

.cfid-card ul {
  margin: 0;
  padding-left: 1.1rem;
  list-style: disc;
  font-size: 0.95rem;
}
.cfid-card li { margin-bottom: 0.45rem; padding-left: 0.25rem; }
.cfid-card li::marker { font-size: 0.8em; }


/* ==========================================================================
 *  9. Bande dégradée (« Nos engagements ») et bandeaux arrondis
 *  ========================================================================== */
.cfid-gradient {
  background: var(--cfid-gradient);
  color: var(--cfid-white);
}
.cfid-gradient :is(h1, h2, h3, h4, p, li, a) { color: var(--cfid-white); }
.cfid-gradient .cfid-eyebrow--dark { color: var(--cfid-black); }
.cfid-gradient p { font-weight: 300; }

/* Bandeau photo « Besoin de renfort ? » */
.cfid-banner {
  max-width: var(--cfid-container);
  margin-inline: auto;
  border-radius: var(--cfid-radius-xl);
  overflow: hidden;
}
.cfid-banner .wp-block-cover__background {
  background: linear-gradient(90deg, rgba(10, 5, 3, 0.7) 0%, rgba(10, 5, 3, 0.1) 75%) !important;
  opacity: 1 !important;
}
.cfid-banner :is(h2, p) { color: var(--cfid-white); }
.cfid-banner .cfid-eyebrow { color: var(--cfid-orange); }

/* Bandeau contact « Un projet, une panne, une question ? » */
.cfid-cta {
  max-width: var(--cfid-container);
  margin-inline: auto;
  background: var(--cfid-gradient);
  border-radius: var(--cfid-radius-xl);
  color: var(--cfid-white);
}
.cfid-cta :is(h2, h3, p) { color: var(--cfid-white); }
.cfid-cta p { font-weight: 300; }
.cfid-cta a {
  color: var(--cfid-white);
  font-weight: 700;
  text-decoration: none;
}
.cfid-cta a:hover { text-decoration: underline; }

.cfid-contact-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 700;
}
.cfid-contact-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--cfid-offwhite);
  color: var(--cfid-orange-dark);
}
.cfid-contact-icon :is(img, svg) { width: 22px; height: 22px; }


/* ==========================================================================
 *  10. Photos et pastilles
 *  ========================================================================== */
.cfid-photo,
.cfid-photo img {
  border-radius: var(--cfid-radius-lg);
}
.cfid-photo { overflow: hidden; background: var(--cfid-grey); margin: 0; }
.cfid-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Pastille orange clair */
.cfid-tag {
  display: inline-block;
  margin: 0;
  padding: 0.35rem 0.9rem;
  border-radius: var(--cfid-pill);
  background: var(--cfid-peach-strong);
  color: var(--cfid-orange);
  font-size: 0.8rem;
  font-weight: 700;
}
/* Évite une 2e ligne vide si un retour à la ligne s'est glissé dans le texte */
.cfid-tag br { display: none; }

/* Rangée de pastilles : alignées à gauche, à la suite, sans étirement */
:root .cfid-tags {
  display: flex !important;
  flex-flow: row wrap !important;
  gap: 0.6rem !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
:root .cfid-tags > *,
:root .cfid-tags .block-editor-block-list__layout > * {
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  width: auto !important;
  margin: 0 !important;
}

.cfid-more {
  color: var(--cfid-orange);
  font-weight: 700;
  text-decoration: none;
}
.cfid-more:hover { text-decoration: underline; }


/* ==========================================================================
 *  11. Blocs de prestation alternés (carte blanche : photo + texte)
 *  Structure : Colonnes.cfid-service > Colonne.cfid-service-photo-col (Image)
 *                                    + Colonne.cfid-service-body (textes)
 *  ========================================================================== */

/* Espace entre les cartes (WordPress remet les marges à 0 dans ce conteneur) */
:root .cfid-services-list > * + * {
  margin-block-start: clamp(1.75rem, 4vw, 2.75rem) !important;
}

:root .cfid-service {
  gap: 0 !important;
  overflow: hidden;                 /* la photo suit les coins arrondis */
  background: var(--cfid-white);
  border-radius: var(--cfid-radius-xl);
}

/* Photo : occupe toute la hauteur de la carte */
@media (min-width: 782px) {
  :root .cfid-service-photo-col {
    position: relative;
    flex: 0 0 34% !important;
    max-width: 34%;
    min-height: 320px;
  }
  :root .cfid-service-body { flex: 1 1 66% !important; }

  .cfid-service-photo-col .wp-block-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  :root .cfid-service-photo-col img {
    position: absolute;
    inset: 0;
    height: 100% !important;
    aspect-ratio: auto;
  }
}

/* Texte */
:root .cfid-service-body {
  margin: 0 !important;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 5vw, 3.5rem) !important;
}
.cfid-service h2 {
  margin: 0;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.75rem);
}
.cfid-service-subtitle {
  margin: 0.35rem 0 1.25rem;
  color: var(--cfid-orange-dark);
  font-size: 0.9rem;
  font-style: italic;
}
.cfid-service-text {
  margin: 0 0 1.75rem;
  max-width: 30em;
  font-weight: 300;
  color: var(--cfid-text-soft);
}

/* Petit libellé en capitales (« NOS RÉALISATIONS : ») */
.cfid-label {
  margin: 0 0 0.75rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cfid-black);
}

/* Pastilles plus légères que les pastilles standard */
:root .cfid-service .cfid-tag { font-weight: 400; padding: 0.4rem 1rem; }


/* ==========================================================================
 *  12. FAQ (blocs « Détails » dans un Groupe .cfid-faq)
 *  Aucune classe à mettre sur chaque bloc Détails.
 *  ========================================================================== */
:root .cfid-faq {
  max-width: 820px;
  margin-block-start: 2.5rem;
  border-top: 1px solid var(--cfid-line);
}

:root .cfid-faq .wp-block-details {
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--cfid-line);
}

/* Question + pastille « + » à droite */
:root .cfid-faq .wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0;
  color: var(--cfid-black);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
:root .cfid-faq .wp-block-details summary::-webkit-details-marker { display: none; }
:root .cfid-faq .wp-block-details summary::marker { content: ""; }

:root .cfid-faq .wp-block-details summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(10, 5, 3, 0.15);
  border-radius: 50%;
  color: var(--cfid-orange);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1;
  transition: background-color var(--cfid-ease), border-color var(--cfid-ease), color var(--cfid-ease);
}
:root .cfid-faq .wp-block-details summary:hover::after { border-color: var(--cfid-orange); }

/* Ouvert : le « + » devient un « − » plein orange */
:root .cfid-faq .wp-block-details[open] summary::after {
  content: "\2212";
  background: var(--cfid-orange);
  border-color: var(--cfid-orange);
  color: var(--cfid-white);
}

/* Réponse */
:root .cfid-faq .wp-block-details > :not(summary) {
  margin: 0 0 1rem !important;
  max-width: 42em;
  font-weight: 300;
  color: var(--cfid-text-soft);
}
:root .cfid-faq .wp-block-details > :last-child { margin-bottom: 1.35rem !important; }

@media (prefers-reduced-motion: no-preference) {
  :root .cfid-faq .wp-block-details[open] > :not(summary) {
    animation: cfid-faq-open 0.25s ease-out;
  }
}
@keyframes cfid-faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
 *  12 bis. Formulaire de contact (extension « CFID Contact », fond dégradé)
 *  --------------------------------------------------------------------------
 *  À coller dans cfid.css, juste avant la section 13 (carrousel).
 *
 *  Page : Groupe.cfid-gradient.cfid-form-section
 *           > Groupe.cfid-deco.cfid-deco--right   (cercle décoratif, vide)
 *           > Groupe.cfid-form-wrap                (titre, texte, shortcode)
 *                 shortcode : [cfid_contact_form]
 *
 *  Le HTML du formulaire est généré par l'extension. Classes utilisées :
 *    cfid-form-grid   grille 2 colonnes des 4 premiers champs
 *    cfid-field       un champ (étiquette masquée + saisie + erreur)
 *    cfid-input       champ sur une ligne
 *    cfid-textarea    champ Message
 *    cfid-form-error  message d'erreur sous un champ
 *    cfid-form-alert  message d'erreur général au-dessus du formulaire
 *    cfid-form-notice message de confirmation après envoi
 *    cfid-checkbox, cfid-submit, cfid-form-legal
 *  ========================================================================== */
.cfid-form-section {
  position: relative;
  overflow: hidden;
}

/* Cercle décoratif collé au bord droit */
.cfid-deco--right {
  left: auto;
  right: 0;
  bottom: 18%;
  width: clamp(110px, 20vw, 183px);
  height: clamp(90px, 15vw, 141px);
  border-radius: var(--cfid-pill) 0 0 var(--cfid-pill);
}

.cfid-form-wrap {
  position: relative;
  z-index: 1;                       /* au-dessus du cercle décoratif */
  box-sizing: border-box;
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  text-align: center;
}
.cfid-form-wrap h2 { margin: 0 0 1rem; }
.cfid-form-wrap .cfid-lead {
  max-width: 34em;
  margin: 0 auto 2.5rem;
  font-size: 0.95rem;
}

/* Disposition : 2 colonnes pour les 4 premiers champs */
.cfid-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem clamp(1.5rem, 8vw, 4rem);
  text-align: left;
}
.cfid-form-message { margin-top: 2rem; text-align: left; }

/* Champs : fond transparent, simple filet blanc dessous */
:root .cfid-form-wrap :is(.cfid-input, .cfid-textarea) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0.55rem 0.5rem;
  border: 0;
  border-bottom: 1px solid var(--cfid-white);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cfid-white);
  font: 400 0.85rem/1.4 var(--cfid-font);
  letter-spacing: 0.02em;
  text-align: left;
}
:root .cfid-form-wrap :is(.cfid-input, .cfid-textarea)::placeholder {
  color: var(--cfid-white);
  opacity: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
}
:root .cfid-form-wrap :is(.cfid-input, .cfid-textarea):focus-visible {
  outline: 2px solid var(--cfid-white);
  outline-offset: 3px;
}

/* Remplissage automatique du navigateur : on garde le texte blanc */
:root .cfid-form-wrap .cfid-input:-webkit-autofill {
  -webkit-text-fill-color: var(--cfid-white);
  caret-color: var(--cfid-white);
  transition: background-color 9999s ease-in-out 0s;
}

/* Message : cadre arrondi */
:root .cfid-form-wrap .cfid-textarea {
  min-height: 7.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--cfid-white);
  border-radius: 22px;
  resize: vertical;
}

/* Erreurs (texte blanc, filet noir : lisible sur l'orange) */
:root .cfid-form-wrap [aria-invalid="true"] { border-bottom-color: var(--cfid-black); }
:root .cfid-form-wrap .cfid-textarea[aria-invalid="true"] { border-color: var(--cfid-black); }
.cfid-form-error {
  display: block;
  margin-top: 0.35rem;
  color: var(--cfid-white);
  font-size: 0.75rem;
  font-weight: 700;
  text-align: left;
}

/* Messages au-dessus du formulaire / après l'envoi */
.cfid-form-alert,
.cfid-form-notice {
  max-width: 34rem;
  margin: 0 auto 1.75rem;
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--cfid-white);
  border-radius: 16px;
  color: var(--cfid-white);
  font-size: 0.85rem;
  font-weight: 700;
}
.cfid-form-alert { border-color: var(--cfid-black); }

/* Case de consentement */
.cfid-form-consent {
  margin-top: 2rem;
  font-size: 0.8rem;
  font-weight: 400;
}
.cfid-consent-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  cursor: pointer;
}
:root .cfid-form-wrap .cfid-checkbox {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: var(--cfid-white) center / 12px no-repeat;
  cursor: pointer;
}
:root .cfid-form-wrap .cfid-checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23E35328' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root .cfid-form-wrap .cfid-checkbox:focus-visible {
  outline: 2px solid var(--cfid-white);
  outline-offset: 3px;
}

/* Bouton d'envoi */
.cfid-form-submit { margin-top: 1.75rem; }
:root .cfid-form-wrap .cfid-submit {
  padding: 0.9rem 2.2rem;
  border: 0;
  border-radius: var(--cfid-pill);
  background: var(--cfid-offwhite);
  box-shadow: 0 4px 10px rgba(10, 5, 3, 0.15);
  color: var(--cfid-orange);
  font: 700 0.95rem/1.2 var(--cfid-font);
  cursor: pointer;
  transition: background-color var(--cfid-ease), color var(--cfid-ease);
}
:root .cfid-form-wrap .cfid-submit:hover,
:root .cfid-form-wrap .cfid-submit:focus-visible {
  background: var(--cfid-peach);
  color: var(--cfid-orange-dark);
}
:root .cfid-form-wrap .cfid-submit:focus-visible {
  outline: 2px solid var(--cfid-white);
  outline-offset: 3px;
}

/* Mentions sous le bouton */
.cfid-form-legal {
  max-width: 34rem;
  margin: 1.75rem auto 0;
  font-size: 0.7rem;
  font-weight: 300;
  line-height: 1.4;
}

/* À ajouter dans @media (max-width: 781px) de la section 15 :
 *
 *   .cfid-form-grid { grid-template-columns: 1fr; }
 *   .cfid-form-wrap { padding-inline: 1.25rem; }
 */


/* ==========================================================================
 *  13. Carrousel « Ils nous font confiance »
 *  Un logo par diapositive, centré. Flèches sur les côtés, points de
 *  pagination en bas. Défilement automatique (3 s) géré par le script du
 *  bloc « HTML personnalisé ».
 *  ========================================================================== */
.carousel-container {
  position: relative;
  width: 100%;
  max-width: var(--cfid-container);
  margin-inline: auto;
  box-sizing: border-box;
  --cfid-carousel-side: 4.5rem;   /* place des flèches (gauche/droite) */
  --cfid-carousel-bottom: 3.5rem; /* place des points (bas) */
  padding: 0 var(--cfid-carousel-side) var(--cfid-carousel-bottom);
}

/* Zone qui masque les diapositives voisines (les flèches restent dehors) */
.carousel-viewport { overflow: hidden; }

.carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  min-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(140px, 22vw, 220px);
}

.carousel-slide img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 420px);
  max-height: 100%;
  object-fit: contain;      /* le logo n'est jamais rogné ni déformé */
  border-radius: 16px;      /* utile pour les logos sur fond plein (SAUR) */
}

/* Flèches : sur les côtés, centrées sur la zone des diapositives */
.carousel-container button.prev,
.carousel-container button.next {
  position: absolute;
  top: calc((100% - var(--cfid-carousel-bottom)) / 2);
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--cfid-orange);
  color: var(--cfid-white);
  font: 700 1.35rem/1 var(--cfid-font);
  cursor: pointer;
  transition: background-color var(--cfid-ease);
}
.carousel-container button.prev { left: 0; }
.carousel-container button.next { right: 0; }

.carousel-container button.prev:hover,
.carousel-container button.next:hover {
  background: var(--cfid-orange-dark);
}

/* Points de pagination (créés par le script) */
.carousel-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.carousel-dot {
  position: relative;
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: var(--cfid-pill);
  background: var(--cfid-grey);
  cursor: pointer;
  transition: width var(--cfid-ease), background-color var(--cfid-ease);
}
/* Zone de clic agrandie sans changer l'aspect */
.carousel-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
}
.carousel-dot.is-active {
  width: 34px;
  background: var(--cfid-orange);
}


/* ==========================================================================
 *  14. Pied de page
 *  ========================================================================== */
.cfid-footer {
  background: var(--cfid-black);
  color: var(--cfid-white);
  font-size: 0.9rem;
  font-weight: 300;
}
.cfid-footer :is(p, li) { color: rgba(255, 255, 255, 0.85); }

.cfid-footer :is(h2, h3, h4) {
  margin-bottom: 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cfid-white);
}

.cfid-footer ul { margin: 0; padding: 0; list-style: none; }
.cfid-footer li { margin-bottom: 0.75rem; }

.cfid-footer a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
}
.cfid-footer a:hover,
.cfid-footer a:focus-visible {
  color: var(--cfid-orange);
}


/* ==========================================================================
 *  15. Tablette et mobile
 *  (WordPress empile les colonnes à partir de 781 px)
 *  ========================================================================== */
@media (max-width: 1024px) {
  .cfid-header { padding-inline: clamp(1rem, 4vw, 2.5rem); }
}

@media (max-width: 781px) {
  :root {
    --cfid-hero-pt: 6.5rem;
    --cfid-radius-xl: 40px;
    --cfid-radius-lg: 24px;
    .cfid-form-grid { grid-template-columns: 1fr; }
    *   .cfid-form-wrap { padding-inline: 1.25rem; }
  }

  /* En-tête */
  .cfid-header { top: 16px; }
  .admin-bar .cfid-header { top: calc(16px + 46px); }

  /* Hero d'accueil */
  :root .cfid-hero .cfid-hero-photo-col { margin-top: 0 !important; }
  .cfid-hero-photo img { aspect-ratio: 1 / 1; }
  .cfid-deco { display: none; }

  /* Hero de page */
  :root .cfid-hero-page { min-height: 520px !important; }

  /* Photo (mobile : bandeau 16:10 au-dessus du texte) */
  :root .cfid-service-photo-col {
    align-self: stretch !important;   /* bat « Centrer verticalement » */
    margin: 0 !important;
  }
  .cfid-service-photo-col .wp-block-image { margin: 0; }
  :root .cfid-service-photo-col img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 0;
  }

  /* Carrousel : pas de place sur les côtés, les flèches passent près des points */
  .carousel-container { padding-inline: 0; }
  .carousel-container button.prev,
  .carousel-container button.next { top: auto; bottom: 0; transform: none; }
  .carousel-container button.prev { left: calc(50% - 110px); }
  .carousel-container button.next { right: calc(50% - 110px); }
}


/* ==========================================================================
 *  16. Accessibilité
 *  ========================================================================== */

/* Focus clavier visible */
:root .wp-block-button .wp-block-button__link:focus-visible {
  outline: 3px solid var(--cfid-black);
  outline-offset: 3px;
}
.carousel-container :is(button.prev, button.next, .carousel-dot):focus-visible {
  outline: 3px solid var(--cfid-black);
  outline-offset: 3px;
}
:root .cfid-faq .wp-block-details summary:focus-visible {
  outline: 2px solid var(--cfid-orange);
  outline-offset: 2px;
}

/* Respect de la préférence « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
  :root .wp-block-button .wp-block-button__link,
  .carousel,
  .carousel-dot,
  .carousel-container button.prev,
  .carousel-container button.next,
  :root .cfid-faq .wp-block-details summary::after { transition: none; }
}