/* Page d'accueil CERESE — styles autonomes, indépendants d'Elementor.
   Source : projet Claude Design "Site Web CERESE", fichier Accueil CERESE.dc.html.
   Deux paliers responsive seulement (règle du CLAUDE.md du projet Design) :
   - "mid"  : min-width 620px, pour toutes les grilles
   - le menu se replie sous max-width 1010px */

.cerese-accueil {
  width: 100%;
  overflow-x: hidden;
  font-family: var(--cerese-font);
  color: var(--cerese-encre);
  background: var(--cerese-blanc);
}
.cerese-accueil * { box-sizing: border-box; }
.cerese-accueil a { color: var(--cerese-lien); text-decoration: underline; text-underline-offset: 3px; }
/* hover:hover : effet purement décoratif (aucune information), neutralisé sur
   tactile pour éviter un état de survol qui reste "collé" après un tap. */
@media (hover: hover) {
  .cerese-accueil a:hover { color: var(--cerese-encre); }
}
.cerese-accueil p { text-wrap: pretty; }

/* ===== En-tête ===== */
.cerese-header {
  background: var(--cerese-blanc);
  color: var(--cerese-encre);
  border-bottom: 1px solid var(--cerese-bordure);
}
.cerese-header__inner {
  max-width: var(--cerese-container);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  min-height: 80px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.cerese-accueil .cerese-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--cerese-encre);
  flex: 0 1 auto;
  min-width: 0;
  margin-right: auto;
}
.cerese-header__brand img { width: auto; height: 56px; display: block; }

/* Boutons icône (loupe recherche, trois traits menu mobile) : icône seule,
   sans cadre. !important sur border/color : même conflit de spécificité avec
   le reset de hello-elementor que partout ailleurs sur ce fichier (voir les
   commentaires plus bas) — un sélecteur d'attribut/élément du reset a la
   même force qu'une simple classe, et reset.css se charge après nous. */
.cerese-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 auto;
  background: transparent;
  border: 0 !important;
  color: var(--cerese-teal) !important;
  cursor: pointer;
}
.cerese-search-toggle:focus { background: transparent !important; border: 0 !important; color: var(--cerese-teal) !important; }
@media (hover: hover) {
  .cerese-search-toggle:hover { background: transparent !important; border: 0 !important; color: var(--cerese-teal) !important; }
}

/* La loupe se place toujours après Contact (nav visible) ou après le menu à trois traits (nav repliée) :
   comme .cerese-search-toggle est le dernier enfant de .cerese-header__inner dans le HTML, il suffit qu'il
   suive .cerese-nav dans le code pour arriver au bon endroit dans les deux cas, sans règle CSS spécifique. */
.cerese-burger {
  display: none !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  flex: 0 0 auto;
  background: transparent;
  border: 0 !important;
  color: var(--cerese-teal) !important;
  cursor: pointer;
}
/* Neutralise le remplissage rose (#c36) que hello-elementor applique par défaut aux <button type="button"> au
   survol/focus. !important nécessaire : le sélecteur `[type=button]:hover` du reset a la même spécificité
   qu'une classe, et reset.css se charge après notre CSS dans le <head> (vérifié), donc il gagne l'égalité sans ça. */
.cerese-burger:focus { background: transparent !important; border: 0 !important; color: var(--cerese-teal) !important; }
@media (hover: hover) {
  .cerese-burger:hover { background: transparent !important; border: 0 !important; color: var(--cerese-teal) !important; }
}

.cerese-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: clamp(10px, 1.2vw, 22px);
  justify-content: flex-end;
  flex: 0 1 auto;
  min-width: 0;
}
.cerese-nav a {
  color: var(--cerese-encre);
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  padding: 11px 0;
  display: block;
  white-space: nowrap;
}
.cerese-nav a.is-active { color: var(--cerese-teal); font-weight: 700; box-shadow: inset 0 -3px 0 0 var(--cerese-teal); }
.cerese-nav a.cerese-nav__contact {
  color: var(--cerese-blanc);
  background: var(--cerese-teal);
  font-weight: 600;
  padding: 12px 18px;
  text-align: center;
}
.cerese-nav a.cerese-nav__contact.is-active { background: var(--cerese-fonce); box-shadow: none; }

@media (max-width: 1010px) {
  .cerese-burger { display: inline-flex !important; }
  .cerese-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 4px 0 20px;
    width: 100%;
    border-top: 1px solid var(--cerese-bordure);
  }
  /* Menu plein écran (demande du client, inspirée du site Royal Haskoning) :
     avant, la nav ouverte restait coincée dans la largeur de l'en-tête,
     entre le logo et la loupe. Elle recouvre maintenant tout l'écran, sous
     l'en-tête (qui reste visible et cliquable, avec l'icône ☰ transformée en
     croix — voir plus bas). 80px = min-height de .cerese-header__inner :
     l'en-tête ne grandit jamais au-delà sur cette plage (nowrap forcé plus
     haut), donc la nav démarre exactement là où il se termine, sans
     chevauchement ni bordure supérieure à gérer. */
  .cerese-nav.is-open {
    display: flex;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    margin: 0;
    padding: 24px clamp(20px, 6vw, 40px) 40px;
    background: var(--cerese-teal);
    border-top: 0;
    gap: 0;
    overflow-y: auto;
    z-index: 100;
  }
  .cerese-nav.is-open a {
    color: var(--cerese-blanc);
    font-size: clamp(22px, 6vw, 28px);
    font-weight: 600;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  .cerese-nav.is-open a.is-active { color: var(--cerese-beige); box-shadow: none; }
  .cerese-nav.is-open a.cerese-nav__contact { background: transparent; color: var(--cerese-blanc); text-align: left; padding: 16px 0; }
  .cerese-nav.is-open a.cerese-nav__contact.is-active { background: transparent; color: var(--cerese-beige); }
  /* Empêche la page de fond de défiler derrière le menu plein écran
     (classe posée par commun.js/accueil.js sur <body> à l'ouverture). */
  body.cerese-menu-ouvert { overflow: hidden; }
  /* Icône ☰ → croix de fermeture, animée, pendant que le menu plein écran
     est ouvert (piloté par aria-expanded, déjà mis à jour par le JS
     existant — pas de changement de script nécessaire pour ce point). */
  .cerese-burger svg line {
    transition: transform 0.2s ease, opacity 0.15s ease;
    transform-origin: 10px 10px;
  }
  .cerese-burger[aria-expanded="true"] svg line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .cerese-burger[aria-expanded="true"] svg line:nth-child(2) { opacity: 0; }
  .cerese-burger[aria-expanded="true"] svg line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
  /* Nav masquée : seuls logo + menu + loupe restent sur la ligne. Sans ce
     nowrap, la loupe (dernier enfant) retombe sur une 2e ligne dès que le
     logo est trop large pour laisser sa place aux deux boutons. Le logo
     garde sa taille (56px, demande du client), donc l'espace économisé pour
     que tout tienne sur une ligne vient d'un resserrement du gap plutôt que
     d'une réduction du logo. */
  .cerese-header__inner { flex-wrap: nowrap; gap: 16px 10px; }
  /* Décalage vertical léger demandé par le client (le logo semblait un peu
     haut par rapport à l'icône menu), sans changer sa taille. */
  .cerese-header__brand img { margin-top: 6px; }
}

/* ===== Panneau de recherche (déroulé sous l'en-tête) ===== */
.cerese-search-panel { display: none; background: var(--cerese-beige); border-bottom: 1px solid var(--cerese-bordure); }
.cerese-search-panel.is-open { display: block; }
.cerese-search-panel__inner { max-width: var(--cerese-container); margin: 0 auto; padding: clamp(14px, 1.6vw, 20px) clamp(20px, 4vw, 40px); display: flex; flex-wrap: wrap; gap: 12px; }
/* border/padding !important : le reset de hello-elementor cible spécifiquement input[type=search] avec une
   spécificité supérieure à une simple classe (élément + attribut). */
.cerese-search-panel__champ { flex: 1 1 260px; min-width: 0; font-family: var(--cerese-font); font-size: 16px; color: var(--cerese-encre); background: var(--cerese-blanc); border: 1px solid var(--cerese-bordure) !important; border-radius: 0; padding: 12px 16px !important; min-height: 48px; }
.cerese-search-panel__bouton { background: var(--cerese-teal) !important; color: var(--cerese-blanc) !important; border: 0 !important; padding: 0 26px; min-height: 48px; font-family: var(--cerese-font); font-size: 15px; font-weight: 600; cursor: pointer; flex: 0 0 auto; }
.cerese-search-panel__bouton:focus { background: var(--cerese-teal) !important; color: var(--cerese-blanc) !important; }
@media (hover: hover) {
  .cerese-search-panel__bouton:hover { background: var(--cerese-teal) !important; color: var(--cerese-blanc) !important; }
}

/* ===== Bande photo défilante ===== */
.cerese-hero { background: var(--cerese-blanc); padding: 0; }
.cerese-hero__viewport { overflow: hidden; width: 100%; }
.cerese-hero__track {
  display: flex;
  width: 300%;
  transition: transform 400ms ease;
}
.cerese-hero__slide { width: 33.3333%; flex: 0 0 33.3333%; }
.cerese-hero__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 520px;
  background-color: #0F2C30;
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
}
.cerese-hero__photo span {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: rgba(234, 239, 198, 0.9);
}
.cerese-hero__photo--photo { background-image: none; padding: 0; }
.cerese-hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cerese-hero__blocks { display: grid; grid-template-columns: 1fr; gap: 0; }
.cerese-hero__block { padding: clamp(20px, 2.4vw, 32px); display: flex; align-items: center; }
.cerese-hero__block--quote { background: var(--cerese-fonce); }
.cerese-hero__block--quote p { margin: 0; color: var(--cerese-blanc); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; font-weight: 700; text-align: justify; }
.cerese-hero__block--desc { background: var(--cerese-teal); }
.cerese-hero__block--desc p { margin: 0; color: var(--cerese-blanc); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5; text-align: justify; }

.cerese-hero__controls {
  max-width: var(--cerese-container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px clamp(20px, 4vw, 40px);
}
.cerese-hero__dots { display: flex; gap: 8px; }
/* Barre visuelle fine (8px), mais zone tactile réelle de 44px (règle des
   cibles tactiles minimales) via un pseudo-élément centré verticalement. */
/* border/color !important : même conflit de spécificité avec le reset de hello-elementor (voir plus haut) */
.cerese-hero__dot { position: relative; width: 44px; height: 44px; border: 0 !important; padding: 0; cursor: pointer; background: transparent; }
.cerese-hero__dot::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 8px;
  transform: translateY(-50%);
  background: var(--cerese-bordure);
}
.cerese-hero__dot.is-active::after { background: var(--cerese-teal); }
/* Neutralise le remplissage rose (#c36) que hello-elementor applique par défaut aux <button type="button"> au
   survol/focus. !important nécessaire : le sélecteur `[type=button]:hover` du reset a la même spécificité
   qu'une classe, et reset.css se charge après notre CSS dans le <head> (vérifié), donc il gagne l'égalité sans ça. */
.cerese-hero__dot:focus { background: transparent !important; border: 0 !important; }
@media (hover: hover) {
  .cerese-hero__dot:hover { background: transparent !important; border: 0 !important; }
}
.cerese-hero__arrows { display: flex; gap: 8px; }
.cerese-hero__arrow {
  width: 48px; height: 48px;
  font-family: var(--cerese-font);
  font-size: 18px;
  cursor: pointer;
  border: 1px solid var(--cerese-teal) !important;
}
/* Les deux flèches partagent le même style : contour au repos, rempli
   seulement au survol/focus/clic — le remplissage doit signaler
   l'interaction, pas distinguer "précédent" de "suivant" en permanence
   (une précédente version figeait "suivant" en plein et "précédent" en
   contour en toute circonstance, sans que le survol change quoi que ce
   soit). !important sur `background` ET `color` : sans lui,
   background-color:transparent / color:#c36 du reset Hello Elementor
   ([type=button], même spécificité, chargé après notre CSS) l'emportait à
   l'état de base — voir cerese-hero__dot ci-dessus pour le même problème. */
.cerese-hero__arrow--prev,
.cerese-hero__arrow--next { background: var(--cerese-blanc) !important; color: var(--cerese-teal) !important; }
.cerese-hero__arrow--prev:focus,
.cerese-hero__arrow--next:focus { background: var(--cerese-teal) !important; color: var(--cerese-blanc) !important; border-color: var(--cerese-teal) !important; }
@media (hover: hover) {
  .cerese-hero__arrow--prev:hover,
  .cerese-hero__arrow--next:hover { background: var(--cerese-teal) !important; color: var(--cerese-blanc) !important; border-color: var(--cerese-teal) !important; }
}

@media (min-width: 620px) {
  .cerese-hero__blocks { grid-template-columns: 1fr 1fr; }

  /* Demande client du 12/09/2026 : la zone photo (A) est réduite de la hauteur
     des deux blocs texte (B citation, C description). Conséquence voulue, le
     volet conserve la hauteur que la photo occupait seule (21:9, plafond
     520px) : les blocs texte prennent leur place SUR la photo au lieu de
     s'ajouter dessous, et le bandeau cesse de repousser le reste de la page
     sous la ligne de flottaison.

     L'aspect-ratio passe du .cerese-hero__photo au .cerese-hero__slide : c'est
     désormais le volet entier qui porte le format, la photo ne fait que
     remplir ce qui reste. align-items:flex-start est indispensable, l'étirement
     par défaut d'un conteneur flex écraserait l'aspect-ratio du volet.

     Règle bornée à 620px : en dessous, B et C s'empilent et leur texte est plus
     haut à lui seul que la hauteur cible (154px à 360px de large). La photo
     disparaîtrait et le texte déborderait. Le mobile garde donc l'empilement. */
  .cerese-hero__track { align-items: flex-start; }
  .cerese-hero__slide {
    display: flex;
    flex-direction: column;
    aspect-ratio: 21 / 9;
    max-height: 520px;
  }
  .cerese-hero__photo {
    aspect-ratio: auto;
    max-height: none;
    flex: 1 1 auto;
    /* Plancher de lisibilité : sur les largeurs intermédiaires (620 à 900px),
       les blocs texte consomment presque toute la hauteur cible. Plutôt que de
       laisser la photo tomber à quelques pixels, elle garde 120px et le volet
       dépasse alors légèrement son format. */
    min-height: 120px;
  }
  .cerese-hero__blocks { flex: 0 0 auto; }
}

/* ===== L'approche CERESE ===== */
.cerese-approche { background: var(--cerese-beige); }
.cerese-approche__inner { max-width: var(--cerese-container); margin: 0 auto; padding: clamp(20px, 2.4vw, 32px) clamp(20px, 4vw, 40px); }
.cerese-approche h2 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.2; font-weight: 700; max-width: 26ch; }
.cerese-approche__rule { width: 96px; height: 3px; background: var(--cerese-teal); margin: 14px 0 18px; }
.cerese-approche__intro { margin: 0; font-size: clamp(17px, 1.3vw, 18px); line-height: 1.6; text-align: justify; color: var(--cerese-encre); }
.cerese-approche h3 { margin: 20px 0 0; font-size: clamp(19px, 1.9vw, 22px); line-height: 1.3; font-weight: 700; }
.cerese-approche__rule--small { width: 80px; height: 3px; background: var(--cerese-teal); margin: 10px 0 0; }

.cerese-departements {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 1.5vw, 20px);
  align-items: stretch;
}
@media (min-width: 620px) {
  .cerese-departements { grid-template-columns: 1fr 1fr; }
}
/* Même traitement au survol que les cartes de commun.css/blog.css : fond
   teal plein, texte en blanc (demande client, étendue ici à la carte
   "Nos départements" de l'accueil). Le lien "Lire la suite ›" n'a pas de
   couleur propre à cette classe, il hérite de la règle .cerese-page a
   globale (teal) : il faut donc aussi le cibler explicitement au survol. */
.cerese-departement {
  background: var(--cerese-blanc);
  outline: 1px solid var(--cerese-bordure);
  padding: clamp(18px, 1.9vw, 24px);
  display: flex;
  flex-direction: column;
  color: var(--cerese-encre);
  transition: background-color 200ms ease, color 200ms ease;
}
@media (hover: hover) {
  .cerese-departement:hover { background: var(--cerese-teal); outline-color: var(--cerese-teal); }
  .cerese-departement:hover,
  .cerese-departement:hover p,
  .cerese-departement:hover a { color: var(--cerese-blanc); }
}
.cerese-departement h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; font-weight: 700; }
.cerese-departement p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cerese-encre); transition: color 200ms ease; }
/* Même animation que .cerese-grille-svc .cerese-carte__lien (commun.css) :
   masqué au repos (max-height:0), révélé au survol/toucher. La carte
   .cerese-departement n'est pas elle-même un <a> (contrairement à
   .cerese-carte de Services), donc le survol se pilote depuis la carte
   parente (:hover) mais le focus clavier cible le lien lui-même
   (:focus-visible) plutôt qu'un :focus-within sur une carte non focusable.

   :focus-visible et non :focus (corrigé le 06/09/2026) : même défaut que les
   cartes Projet et Services, un clic souris laissait le lien révélé en
   permanence. Voir le commentaire détaillé sur .cerese-carte-projet__resume
   dans projets.css. */
.cerese-departement a {
  display: inline-block;
  align-self: flex-end;
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: color 200ms ease, max-height 320ms ease, opacity 220ms ease;
}
.cerese-departement a:focus-visible { max-height: 28px; opacity: 1; }
@media (hover: hover) {
  .cerese-departement:hover a { max-height: 28px; opacity: 1; }
}

/* Mobile : le lien menant vers la page fille (détail du département) est centré sous le texte qui le
   précède, plutôt qu'aligné à gauche comme sur les écrans plus larges. Toujours visible (pas d'animation
   de survol fiable au toucher), même logique que .cerese-grille-svc .cerese-carte__lien sur mobile. */
@media (max-width: 619px) {
  .cerese-departement a { align-self: center; max-height: 28px; opacity: 1; }
  /* Justification : trop de mots à étirer par ligne sur une colonne mobile
     étroite, ce qui crée des vides visibles entre les mots. Repasse en
     alignement à gauche sous ce palier (voir le même correctif dans
     commun.css pour le détail). « Pourquoi choisir » et
     « Domaines » sont traités en fin de fichier : leur règle de base vient
     après ce bloc et l'emportait (corrigé le 12/10/2026). */
  .cerese-hero__block--quote p,
  .cerese-hero__block--desc p,
  .cerese-approche__intro { text-align: left; }
}

/* ===== Bande CTA services ===== */
.cerese-accueil .cerese-cta-services {
  display: block;
  text-decoration: none;
  background: var(--cerese-fonce);
  color: var(--cerese-blanc);
}
/* hello-elementor (reset.css) assombrit tout <a> au survol (color:#336) : neutralisé ici */
.cerese-accueil .cerese-cta-services:focus { color: var(--cerese-blanc) !important; }
@media (hover: hover) {
  .cerese-accueil .cerese-cta-services:hover { color: var(--cerese-blanc) !important; }
}
.cerese-cta-services__inner {
  max-width: var(--cerese-container);
  margin: 0 auto;
  padding: clamp(16px, 1.8vw, 24px) clamp(20px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
}
.cerese-cta-services__title { font-size: clamp(20px, 2.2vw, 28px); font-weight: 800; text-transform: uppercase; line-height: 1.25; max-width: 34ch; }
.cerese-cta-services__button { background: var(--cerese-vert); color: var(--cerese-blanc); padding: 14px 26px; font-size: 16px; font-weight: 600; flex: 0 0 auto; }
@media (hover: hover) {
  .cerese-cta-services:hover .cerese-cta-services__button { background: #1E8630; }
}

/* ===== Pourquoi choisir le CERESE ? ===== */
.cerese-pourquoi { background: var(--cerese-teal); color: var(--cerese-blanc); }
.cerese-pourquoi__inner { max-width: var(--cerese-container); margin: 0 auto; padding: clamp(28px, 3.5vw, 48px) clamp(20px, 4vw, 40px); }
.cerese-pourquoi h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; font-weight: 700; max-width: 26ch; }
.cerese-pourquoi__rule { width: 96px; height: 3px; background: var(--cerese-beige); margin: 16px 0 20px; }
.cerese-pourquoi__intro { margin: 0; font-size: clamp(17px, 1.3vw, 18px); line-height: 1.6; text-align: justify; color: var(--cerese-beige); }

.cerese-accordeon { margin-top: 20px; display: flex; flex-direction: column; max-width: 78ch; }
.cerese-accordeon__item + .cerese-accordeon__item { }
/* border/color/display !important : même conflit de spécificité avec le reset de hello-elementor (voir plus haut) */
.cerese-accordeon__trigger {
  /* !important : sans lui, le reset de hello-elementor (charge après notre
     CSS, spécificité égale via [type=button]) regagne la main sur la
     largeur pour les items dont le texte est court (item 04) — le bouton se
     réduit alors à la largeur de son contenu, et son signe +/- se retrouve
     plus près du texte qu'à l'extrémité droite comme les items 01-03, qui
     eux occupent visuellement toute la largeur à cause de leur texte plus
     long. Même famille de bug que les autres !important de ce fichier. */
  width: 100% !important;
  background: transparent;
  border: 0 !important;
  padding: 10px 0;
  color: var(--cerese-blanc) !important;
  font-family: var(--cerese-font);
  display: flex !important;
  gap: 10px;
  /* flex-start plutôt que baseline : avec baseline, le signe +/- d'un item
     dont le libellé tient sur 1 ligne (item 04) ne tombait pas à la même
     hauteur que celui des items dont le libellé passe sur 2 lignes (01-03) —
     la ligne de base de référence n'est pas la même selon le nombre de
     lignes. flex-start aligne tous les signes en haut du bloc, sur la même
     colonne verticale, quel que soit le nombre de lignes du libellé. */
  align-items: flex-start;
  /* !important : sans lui, un centrage venu d'ailleurs (reset du thème
     parent ou réglages globaux Elementor, non identiques entre Local et
     TasteWP) regagne la main sur ce texte pourtant censé rester à gauche —
     visible une fois que width:100% force chaque bouton à occuper toute la
     largeur (voir plus haut) : le texte se centre alors dans cette largeur
     complète au lieu de coller à son bord gauche, ce qui décale le numéro
     de chaque item vers la droite selon la longueur de son libellé. */
  text-align: left !important;
  cursor: pointer;
  /* white-space:normal !important : [type=button] du reset Hello Elementor pose
     nowrap à spécificité égale et charge après notre CSS (même conflit que
     documenté plus bas pour son remplissage rose) ; hérité par
     .cerese-accordeon__label, ce nowrap empêchait tout retour à la ligne et
     faisait déborder le libellé (121px à 320px, 66px à 375px, mesurés avant
     correctif). */
  white-space: normal !important;
}
.cerese-accordeon__label { font-size: clamp(16px, 1.2vw, 17px); font-weight: 600; flex: 1; min-width: 0; line-height: 1.5; text-align: left !important; }
.cerese-accordeon__sign { font-size: 18px; color: var(--cerese-beige); flex: 0 0 auto; }
/* Neutralise le remplissage rose (#c36) que hello-elementor applique par défaut aux <button type="button"> au
   survol/focus. !important nécessaire : le sélecteur `[type=button]:hover` du reset a la même spécificité
   qu'une classe, et reset.css se charge après notre CSS dans le <head> (vérifié), donc il gagne l'égalité sans ça. */
.cerese-accordeon__trigger:focus { background: transparent !important; border: 0 !important; color: var(--cerese-blanc) !important; }
@media (hover: hover) {
  .cerese-accordeon__trigger:hover { background: transparent !important; border: 0 !important; color: var(--cerese-blanc) !important; }
}
.cerese-accordeon__panel {
  margin: 0;
  padding: 0 0 14px 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--cerese-beige);
  max-width: 78ch;
  display: none;
}
.cerese-accordeon__item.is-open .cerese-accordeon__panel { display: block; }

/* ===== Domaines d'expertises ===== */
.cerese-domaines { max-width: var(--cerese-container); margin: 0 auto; padding: clamp(20px, 2.5vw, 32px) clamp(20px, 4vw, 40px); }
.cerese-domaines h2 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.2; font-weight: 700; max-width: 24ch; }
.cerese-domaines__rule { width: 96px; height: 3px; background: var(--cerese-teal); margin: 16px 0 20px; }
.cerese-domaines__intro { margin: 0; font-size: clamp(17px, 1.3vw, 18px); line-height: 1.6; text-align: justify; color: var(--cerese-encre); }
.cerese-domaines ul {
  margin: 14px 0 0;
  padding: 0 0 0 22px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 72ch;
  font-size: clamp(16px, 1.2vw, 17px);
  line-height: 1.45;
  color: var(--cerese-encre);
}

/* ===== Bandeau "Partager cette page" (juste avant le pied de page) ===== */
/* Couleur foncée (déjà utilisée pour .cerese-footer__bottom) plutôt que le
   teal du pied de page juste en dessous : but demandé par le client, un
   bandeau visuellement séparé plutôt que fondu dans le pied de page. */
.cerese-partage { background: var(--cerese-fonce); }
.cerese-partage__inner {
  max-width: var(--cerese-container);
  margin: 0 auto;
  padding: clamp(16px, 1.8vw, 22px) clamp(20px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.cerese-partage__label { color: var(--cerese-blanc); font-weight: 600; font-size: 15px; }
.cerese-partage__liens { display: flex; flex-wrap: wrap; gap: 8px; }
.cerese-accueil .cerese-partage__bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--cerese-blanc);
  color: var(--cerese-teal);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  flex: 0 0 auto;
}
.cerese-accueil .cerese-partage__bouton:focus,
.cerese-accueil .cerese-partage__bouton:active { background: var(--cerese-beige) !important; color: var(--cerese-fonce) !important; }
@media (hover: hover) {
  .cerese-accueil .cerese-partage__bouton:hover { background: var(--cerese-beige) !important; color: var(--cerese-fonce) !important; }
}

/* ===== Pied de page ===== */
.cerese-footer { background: var(--cerese-teal); color: var(--cerese-blanc); }
.cerese-footer__inner {
  max-width: var(--cerese-container);
  margin: 0 auto;
  padding: clamp(24px, 2.5vw, 36px) clamp(20px, 4vw, 40px);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.5vw, 40px);
  align-items: start;
}
/* 5 colonnes (logo, 2 colonnes de nav, contact, suivez-nous) : brand-cell
   rétréci (2.6fr → 2.1fr) pour laisser la place à la nouvelle colonne
   Suivez-nous, demande du client pour l'aligner sur la même ligne
   qu'Accueil/Pôle recherche/Email plutôt que de rester empilé sous
   Email/Téléphone. */
@media (min-width: 620px) {
  .cerese-footer__inner { grid-template-columns: 2.1fr 0.7fr 0.7fr 0.9fr 0.6fr; }
}
.cerese-footer__brand-cell { min-width: 0; overflow: hidden; }
.cerese-footer__brand { display: flex; align-items: center; min-width: 0; }
/* Taille d'origine du fichier fourni par le client (30/08), revenu à une
   image unique (logo + filet + définition) après un essai de découpage en
   plusieurs éléments HTML, écarté à la demande du client. Conservée à
   l'identique sur mobile et desktop (l'agrandissement desktop précédemment
   demandé a aussi été annulé). */
.cerese-footer__brand img { width: auto; height: 72px; max-width: 100%; display: block; }
/* Sur mobile étroit, .cerese-footer__inner reste sur 1fr (règle de base) :
   les 2 colonnes de liens (Accueil/Services/Projets et Pôle recherche/Blog
   & Actualités/Carrière) s'empilent alors l'une sous l'autre en 6 lignes.
   Demande du client : les mettre côte à côte pour que chaque lien de la 2e
   colonne retombe à la même hauteur que son vis-à-vis de la 1re
   (Accueil/Pôle recherche, Services/Blog & Actualités, Projets/Carrière),
   ce qui réduit la hauteur totale du panneau. Logo et bloc contact restent
   en pleine largeur au-dessus/en-dessous de cette paire. */
@media (max-width: 619px) {
  .cerese-footer__inner { grid-template-columns: repeat(2, 1fr); }
  .cerese-footer__brand-cell,
  .cerese-footer__contact,
  .cerese-footer__suivez { grid-column: 1 / -1; }
}
.cerese-footer__col { display: flex; flex-direction: column; gap: 12px; }
.cerese-footer__col a { color: var(--cerese-blanc); text-decoration: none; font-size: 16px; font-weight: 600; }
.cerese-footer__contact { display: flex; flex-direction: column; gap: 14px; font-size: 16px; }
.cerese-footer__contact-label { font-weight: 700; color: var(--cerese-beige); }
.cerese-footer__contact a { color: var(--cerese-blanc); text-decoration: none; }
.cerese-footer__suivez { font-size: 16px; }
.cerese-footer__reseaux { display: flex; gap: 8px; margin-top: 4px; }
.cerese-accueil .cerese-footer__reseau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--cerese-blanc);
  color: var(--cerese-blanc);
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}
.cerese-accueil .cerese-footer__reseau:focus,
.cerese-accueil .cerese-footer__reseau:active { background: var(--cerese-blanc) !important; color: var(--cerese-teal) !important; }
@media (hover: hover) {
  .cerese-accueil .cerese-footer__reseau:hover { background: var(--cerese-blanc) !important; color: var(--cerese-teal) !important; }
}
.cerese-footer__bottom { background: var(--cerese-fonce); }
.cerese-footer__bottom-inner {
  max-width: var(--cerese-container);
  margin: 0 auto;
  padding: 20px clamp(20px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-size: 14px;
  color: var(--cerese-bordure);
}
.cerese-footer__bottom-inner a { color: var(--cerese-bordure); text-decoration: none; }

/* Mobile : alignement à gauche des intros « Pourquoi choisir le CERESE » et
   « Domaines d'expertise ». Placé en fin de fichier parce que leur règle de
   base (text-align: justify) est déclarée après le bloc mobile du haut, à
   spécificité égale : elle l'emportait et le texte restait justifié. */
@media (max-width: 619px) {
  .cerese-pourquoi__intro,
  .cerese-domaines__intro { text-align: left; }
}

/* Mobile, demandes client du 12/10/2026 :
   - bandeau : seul le bloc B (citation, fond vert foncé) reste sous la
     photo ; le bloc C (description) est masqué sous 620px, où les deux
     s'empilaient et doublaient la hauteur du volet. À partir de 620px, B et
     C restent côte à côte ;
   - titres des départements centrés (le texte reste aligné à gauche). */
@media (max-width: 619px) {
  .cerese-hero__block--desc { display: none; }
  .cerese-departement h3 { text-align: center; }
}