/* ============================================================
   Page d'accueil — intégration de la maquette « Accueil Calepin »
   Chargée uniquement sur la page d'accueil (is_front_page).

   Les valeurs viennent du handoff design_handoff_accueil_calepin :
   design-system/colors_and_type.css pour les jetons, README.md pour
   les mesures. Aucune couleur en dur hors de la déclaration des jetons.

   Écarts assumés par rapport aux maquettes, tous arbitrés :
   - police d'affichage : Caveat (auto-hébergée) au lieu de Moon Flower,
     absente du bundle livré ; c'est le repli déclaré par le design system ;
   - header : celui du site, la maquette en propose un autre (hors périmètre) ;
   - bande de compteurs masquée (voir CP_HOME_AFFICHER_COMPTEURS).
   ============================================================ */

/* ─── Jetons ─────────────────────────────────────────────── */

.cp-home {

    /* Marque — repris de colors_and_type.css */
    --cp-coral-700:  #B8442C;
    --cp-teal-700:   #3F8780;
    --cp-teal-200:   #C8E2DF;
    --cp-white:      #FFFFFF;

    /* Neutres dérivés du graphite et de la crème */
    --cp-n-200: #ECE3D6;
    --cp-n-300: #D9CFC1;
    --cp-n-400: #B5AB9D;
    --cp-n-500: #847C72;
    --cp-n-600: #5C5650;

    /* Rôles */
    --cp-fg-1: var(--cp-graphite);
    --cp-fg-2: var(--cp-n-600);
    --cp-fg-3: var(--cp-n-500);
    --cp-border-subtle:  var(--cp-n-200);
    --cp-border-default: var(--cp-n-300);
    --cp-action-secondary-border: var(--cp-n-400);

    /* Sur fond sombre */
    --cp-on-dark-1: #EFE7DC;
    --cp-on-dark-2: #DFD6C9;
    --cp-on-dark-3: #C9C0B4;
    --cp-on-dark-surface: rgba(255, 255, 255, 0.06);

    /* Formes */
    --cp-r-sm:   8px;
    --cp-r-md:  12px;
    --cp-r-lg:  18px;
    --cp-r-pill: 999px;

    /* Ombres — jamais de noir pur */
    --cp-shadow-sm: 0 2px 6px rgba(44, 44, 42, .06), 0 1px 2px rgba(44, 44, 42, .04);
    --cp-shadow-md: 0 6px 18px rgba(44, 44, 42, .08), 0 2px 4px rgba(44, 44, 42, .04);
    --cp-shadow-focus: 0 0 0 3px rgba(91, 168, 160, .40);

    /* Mouvement */
    --cp-dur-fast: 120ms;
    --cp-dur-base: 200ms;
    --cp-dur-slow: 320ms;
    --cp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Gabarit */
    --cp-container: 1140px;
    --cp-pad-x: 40px;
}

/* ─── Neutralisation des conteneurs GeneratePress ────────────
   #page est un .grid-container plafonné à 1520px et .site-content
   porte le rembourrage du thème : les bandes pleine largeur de la
   maquette (pêche, graphite) ne peuvent pas en sortir sans ça.
   Strictement limité à la page d'accueil. */

.home #page.grid-container {
    max-width: none;
    padding: 0;
}

.home .site-content {
    padding: 0;
    display: block;
}

.home .site-main {
    margin: 0;
}

/* ─── Socle ──────────────────────────────────────────────── */

.cp-home {
    background: var(--cp-cream);
    color: var(--cp-fg-1);
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

.cp-home .cp-container {
    max-width: var(--cp-container);
    margin-inline: auto;
}

.cp-home h2 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--cp-fg-1);
    margin: 0 0 12px;
    text-wrap: balance;
}

.cp-home h3 {
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    font-size: 19px;
    line-height: 1.3;
    margin: 0 0 8px;
    text-wrap: balance;
}

.cp-home p {
    margin: 0 0 16px;
    text-align: left;
}

.cp-home .cp-lede {
    font-size: 17px;
    line-height: 1.55;
    color: var(--cp-fg-2);
    text-wrap: pretty;
}

.cp-home .cp-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cp-teal-700);
}

.cp-home .cp-eyebrow--orange { color: var(--cp-orange); }

.cp-home .cp-icon {
    flex: none;
    display: inline-block;
    vertical-align: middle;
}

.cp-home .cp-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--cp-teal-700);
    text-decoration: none;
}

.cp-home .cp-link:hover { color: var(--cp-coral); text-decoration: underline; }

/* Halo de focus commun — jamais d'outline supprimé sans remplacement. */
.cp-home a:focus-visible,
.cp-home button:focus-visible,
.cp-home input:focus-visible,
.cp-home select:focus-visible {
    outline: none;
    box-shadow: var(--cp-shadow-focus);
    border-radius: var(--cp-r-sm);
}

/* Pot de miel du formulaire Brevo : présent mais hors écran. */
.cp-home .cp-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* ─── Boutons ────────────────────────────────────────────── */

.cp-home .cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-inline: 20px;
    border: 1px solid transparent;
    border-radius: var(--cp-r-pill);
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--cp-dur-base) var(--cp-ease),
                color var(--cp-dur-base) var(--cp-ease),
                border-color var(--cp-dur-base) var(--cp-ease);
}

.cp-home .cp-btn--44 { height: 44px; font-size: 15px; }
.cp-home .cp-btn--48 { height: 48px; font-size: 16px; }
.cp-home .cp-btn--52 { height: 52px; font-size: 17px; }
.cp-home .cp-btn--block { width: 100%; }

.cp-home .cp-btn--primary {
    background: var(--cp-coral);
    color: var(--cp-white);
}

.cp-home .cp-btn--primary:hover,
.cp-home .cp-btn--primary:focus { background: var(--cp-coral-700); color: var(--cp-white); }
.cp-home .cp-btn--primary:active { opacity: .92; }

.cp-home .cp-btn--secondary {
    background: transparent;
    border-color: var(--cp-action-secondary-border);
    color: var(--cp-fg-1);
}

.cp-home .cp-btn--secondary:hover,
.cp-home .cp-btn--secondary:focus { background: var(--cp-peach); color: var(--cp-fg-1); }

.cp-home .cp-btn--tertiary {
    background: var(--cp-teal-200);
    color: var(--cp-teal-700);
}

.cp-home .cp-btn--tertiary:hover,
.cp-home .cp-btn--tertiary:focus { background: var(--cp-teal); color: var(--cp-white); }

/* ─── Pastilles ──────────────────────────────────────────── */

.cp-home .cp-pill {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding-inline: 14px;
    border-radius: var(--cp-r-pill);
    font-size: 14px;
    text-decoration: none;
    color: var(--cp-fg-1);
}

.cp-home .cp-pill--peach   { background: var(--cp-peach); }
.cp-home .cp-pill--teal    { background: var(--cp-teal-200); color: var(--cp-teal-700); }
.cp-home .cp-pill--outline { border: 1px solid var(--cp-border-default); background: transparent; }
.cp-home .cp-pill--outline:hover { background: var(--cp-peach); color: var(--cp-fg-1); }

/* ─── Hero ───────────────────────────────────────────────── */

.cp-home .cp-hero {
    position: relative;
    padding: 64px var(--cp-pad-x) 56px;
    overflow: hidden;
}

/* Rappel du trait dessiné du logo — plafonné à 8 % comme l'exige le DS. */
.cp-home .cp-hero__circle {
    position: absolute;
    top: -140px;
    right: -80px;
    width: 540px;
    height: 540px;
    border-radius: var(--cp-r-pill);
    border: 2px solid var(--cp-orange);
    opacity: .08;
    pointer-events: none;
}

.cp-home .cp-hero__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 48px;
    align-items: start;
}

.cp-home .cp-hero__title {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 56px;
    line-height: 1.1;
    margin: 12px 0 16px;
    color: var(--cp-fg-1);
    text-wrap: balance;
}

.cp-home .cp-hero__lede {
    font-size: 18px;
    color: var(--cp-fg-2);
    max-width: 560px;
    text-wrap: pretty;
    margin: 0 0 28px;
}

/* Carte de recherche */

.cp-home .cp-hero-search {
    background: var(--cp-white);
    border: 1px solid var(--cp-border-subtle);
    border-radius: var(--cp-r-lg);
    box-shadow: var(--cp-shadow-md);
    padding: 8px 8px 20px;
}

.cp-home .cp-hero-search__tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--cp-peach);
    border-radius: var(--cp-r-pill);
    margin-bottom: 20px;
}

.cp-home .cp-hero-search__tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding-inline: 10px;
    border: none;
    border-radius: var(--cp-r-pill);
    background: transparent;
    color: var(--cp-n-600);
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    cursor: pointer;
    transition: background-color var(--cp-dur-base) var(--cp-ease),
                color var(--cp-dur-base) var(--cp-ease),
                box-shadow var(--cp-dur-base) var(--cp-ease);
}

.cp-home .cp-hero-search__tab.is-active {
    background: var(--cp-white);
    color: var(--cp-coral);
    box-shadow: var(--cp-shadow-sm);
}

.cp-home .cp-hero-search__form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    padding-inline: 12px;
}

/* Les onglets prénom et article n'ont qu'un champ. */
.cp-home .cp-hero-search__form:has(.cp-field--wide) {
    grid-template-columns: 1fr auto;
}

.cp-home .cp-field {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding-inline: 12px;
    border: 1px solid var(--cp-border-default);
    border-radius: var(--cp-r-sm);
    background: var(--cp-white);
}

.cp-home .cp-field:focus-within {
    border-color: var(--cp-teal);
    box-shadow: var(--cp-shadow-focus);
}

.cp-home .cp-field__icon { color: var(--cp-teal); }

.cp-home .cp-field__control {
    width: 100%;
    min-width: 0;
    height: 100%;
    border: none;
    background: transparent;
    font-family: 'Lato', sans-serif;
    font-size: 15px;
    color: var(--cp-fg-1);
    padding: 0;
}

/* Le halo est porté par .cp-field, pas par le champ lui-même. */
.cp-home .cp-field .cp-field__control:focus,
.cp-home .cp-field .cp-field__control:focus-visible {
    outline: none;
    box-shadow: none;
}

.cp-home .cp-field__control::placeholder { color: var(--cp-n-400); opacity: 1; }

/* Un nom de spécialité long ne doit pas déborder de son champ. */
.cp-home select.cp-field__control {
    text-overflow: ellipsis;
    cursor: pointer;
}

.cp-home .cp-field__control--boxed {
    height: 48px;
    padding-inline: 14px;
    border: 1px solid var(--cp-border-default);
    border-radius: var(--cp-r-sm);
    background: var(--cp-white);
}

.cp-home .cp-hero-search__note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 12px 0;
    font-size: 14px;
    color: var(--cp-fg-3);
}

.cp-home .cp-hero-search__note .cp-icon { color: var(--cp-teal); }

.cp-home .cp-hero-search__results {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 12px 0;
}

.cp-home .cp-hero-search__results:empty { display: none; }

.cp-home .cp-result {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    height: 36px;
    padding-inline: 14px;
    border-radius: var(--cp-r-pill);
    background: var(--cp-teal-200);
    color: var(--cp-teal-700);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    animation: cpRise var(--cp-dur-base) var(--cp-ease) both;
}

.cp-home .cp-result:hover { background: var(--cp-teal); color: var(--cp-white); }
.cp-home .cp-result__rank { font-size: 13px; font-weight: 400; color: var(--cp-n-600); }
.cp-home .cp-result:hover .cp-result__rank { color: var(--cp-white); }

.cp-home .cp-hero-search__themes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 12px 0;
}

/* Les deux portes */

.cp-home .cp-hero__doors {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 40px;
}

.cp-home .cp-door {
    border-radius: var(--cp-r-md);
    padding: 24px;
    transition: box-shadow var(--cp-dur-base) var(--cp-ease),
                transform var(--cp-dur-base) var(--cp-ease);
}

.cp-home .cp-door:hover { box-shadow: var(--cp-shadow-md); transform: translateY(-2px); }

.cp-home .cp-door p { font-size: 15px; margin: 10px 0 18px; }

.cp-home .cp-door--parent {
    background: var(--cp-white);
    border: 1px solid var(--cp-border-subtle);
}

.cp-home .cp-door--parent p { color: var(--cp-fg-2); }

.cp-home .cp-door--pro { background: var(--cp-graphite); }
.cp-home .cp-door--pro p { color: var(--cp-on-dark-1); }

/* ─── Bande de compteurs ─────────────────────────────────── */

.cp-home .cp-stats {
    background: var(--cp-peach);
    border-block: 1px solid var(--cp-border-subtle);
    padding: 28px var(--cp-pad-x);
}

.cp-home .cp-stats__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cp-home .cp-stat {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.cp-home .cp-stat__value {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
    color: var(--cp-coral);
}

.cp-home .cp-stat__label { font-size: 15px; color: var(--cp-fg-2); }

/* ─── Prénoms ────────────────────────────────────────────── */

.cp-home .cp-prenoms { padding: 72px var(--cp-pad-x); }

.cp-home .cp-prenoms__inner {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 48px;
    align-items: center;
}

.cp-home .cp-jour {
    position: relative;
    margin-top: 12px;
    min-height: 260px;
    background: var(--cp-white);
    border: 1px solid var(--cp-border-subtle);
    border-radius: var(--cp-r-lg);
    box-shadow: var(--cp-shadow-md);
    padding: 32px;
}

.cp-home .cp-jour__slide { animation: cpRise var(--cp-dur-slow) var(--cp-ease) both; }
.cp-home .cp-jour__slide[hidden] { display: none; }

.cp-home .cp-jour__name {
    display: block;
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 64px;
    line-height: 1.05;
    color: var(--cp-fg-1);
    text-decoration: none;
}

.cp-home .cp-jour__name:hover { color: var(--cp-coral); }

.cp-home .cp-jour__meta {
    font-size: 15px;
    color: var(--cp-fg-3);
    margin: 4px 0 12px;
}

.cp-home .cp-jour__text {
    font-size: 16px;
    color: var(--cp-fg-2);
    margin: 0 0 16px;
    text-wrap: pretty;
}

.cp-home .cp-jour__pills { display: flex; flex-wrap: wrap; gap: 8px; }

.cp-home .cp-dots {
    display: flex;
    align-items: center;
    /* Les boutons portent eux-mêmes leur espacement (cible tactile) : pas de
       gap, et un décalage à gauche pour que la première pastille reste alignée
       sur le bord de la carte. */
    gap: 0;
    margin-top: 8px;
    margin-left: -8px;
}

/* La pastille visible fait 8px, mais la cible tactile doit rester à 44px : le
   thème l'impose à tout bouton (style.css, « Cibles tactiles »), le handoff
   l'exige aussi. Le bouton porte donc la cible, le pseudo-élément le dessin.
   Conséquence assumée : les pastilles sont un peu plus espacées que sur la
   maquette (24px d'entraxe au lieu de 14px). */
.cp-home .cp-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 44px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.cp-home .cp-dot::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: var(--cp-r-pill);
    background: var(--cp-n-300);
    transition: width var(--cp-dur-base) var(--cp-ease),
                background-color var(--cp-dur-base) var(--cp-ease);
}

.cp-home .cp-dot.is-active::before { width: 20px; background: var(--cp-coral); }

.cp-home .cp-prenom-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 24px 0;
}

.cp-home .cp-prenom-tile {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    background: var(--cp-white);
    border: 1px solid var(--cp-border-subtle);
    border-radius: var(--cp-r-md);
    text-decoration: none;
    transition: box-shadow var(--cp-dur-base) var(--cp-ease),
                transform var(--cp-dur-base) var(--cp-ease);
}

.cp-home .cp-prenom-tile:hover { box-shadow: var(--cp-shadow-md); transform: translateY(-2px); }
.cp-home .cp-prenom-tile__name { font-size: 18px; font-weight: 700; color: var(--cp-fg-1); }
.cp-home .cp-prenom-tile__rank { font-size: 13px; color: var(--cp-fg-3); }

.cp-home .cp-prenoms__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ─── Les trois familles ─────────────────────────────────── */

.cp-home .cp-familles {
    background: var(--cp-peach);
    padding: 72px var(--cp-pad-x);
}

.cp-home .cp-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 32px;
}

.cp-home .cp-section-head--tight { align-items: baseline; }
.cp-home .cp-section-head .cp-lede { max-width: 620px; margin: 0; }
.cp-home .cp-section-head h2 { margin-bottom: 8px; }

.cp-home .cp-familles__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cp-home .cp-famille {
    background: var(--cp-white);
    border: 1px solid var(--cp-border-subtle);
    border-radius: var(--cp-r-md);
    box-shadow: var(--cp-shadow-sm);
    padding: 24px;
    transition: box-shadow var(--cp-dur-base) var(--cp-ease),
                transform var(--cp-dur-base) var(--cp-ease);
}

.cp-home .cp-famille:hover { box-shadow: var(--cp-shadow-md); transform: translateY(-2px); }

.cp-home .cp-famille__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--cp-r-pill);
    background: var(--cp-teal-200);
    color: var(--cp-teal-700);
    margin-bottom: 16px;
}

.cp-home .cp-famille p { font-size: 15px; color: var(--cp-fg-2); }

/* ─── Articles ───────────────────────────────────────────── */

.cp-home .cp-articles { padding: 72px var(--cp-pad-x); }

.cp-home .cp-articles__row1 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.cp-home .cp-articles__side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cp-home .cp-articles__side .cp-article { flex: 1; }

.cp-home .cp-articles__row2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.cp-home .cp-article {
    background: var(--cp-white);
    border: 1px solid var(--cp-border-subtle);
    border-radius: var(--cp-r-md);
    overflow: hidden;
    transition: box-shadow var(--cp-dur-base) var(--cp-ease),
                transform var(--cp-dur-base) var(--cp-ease);
}

.cp-home .cp-article:hover { box-shadow: var(--cp-shadow-md); transform: translateY(-2px); }
.cp-home .cp-article--lead { border-radius: var(--cp-r-lg); }

.cp-home .cp-article__link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.cp-home .cp-article--row .cp-article__link {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 18px;
    padding: 18px;
}

.cp-home .cp-article__media {
    position: relative;
    background: var(--cp-peach);
    overflow: hidden;
}

.cp-home .cp-article__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cp-home .cp-article__media--lead  { height: 300px; }
.cp-home .cp-article__media--small { height: 150px; }

.cp-home .cp-article__media--thumb {
    min-height: 100px;
    height: 100%;
    border-radius: var(--cp-r-sm);
}

.cp-home .cp-badge {
    position: absolute;
    left: 16px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding-inline: 12px;
    border-radius: var(--cp-r-pill);
    background: var(--cp-white);
    font-size: 13px;
    font-weight: 700;
    color: var(--cp-fg-1);
}

.cp-home .cp-article__body { padding: 20px; }
.cp-home .cp-article--lead .cp-article__body { padding: 28px; }
.cp-home .cp-article--row  .cp-article__body { padding: 0; }

.cp-home .cp-article__cat {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cp-teal-700);
    margin-bottom: 6px;
}

.cp-home .cp-article__title {
    font-size: 18px;
    line-height: 1.3;
    margin: 0 0 8px;
}

.cp-home .cp-article__title--lead { font-size: 24px; line-height: 1.25; }

.cp-home .cp-article__excerpt {
    font-size: 16px;
    color: var(--cp-fg-2);
    margin: 0 0 10px;
    text-wrap: pretty;
}

.cp-home .cp-article__excerpt--sm { font-size: 14px; }

.cp-home .cp-article__meta { font-size: 14px; color: var(--cp-fg-3); margin: 0; }
.cp-home .cp-article__meta--sm { font-size: 13px; }

.cp-home .cp-article:hover .cp-article__title { color: var(--cp-coral); }

/* ─── Bloc professionnels ────────────────────────────────── */

.cp-home .cp-pro {
    background: var(--cp-graphite);
    padding: 72px var(--cp-pad-x);
}

.cp-home .cp-pro__inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 48px;
    align-items: center;
}

.cp-home .cp-pro__title {
    color: var(--cp-white);
    margin: 12px 0 12px;
}

.cp-home .cp-pro__text {
    font-size: 17px;
    color: var(--cp-on-dark-2);
    margin: 0 0 24px;
    text-wrap: pretty;
}

.cp-home .cp-pro__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-home .cp-pro__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--cp-on-dark-surface);
    border-radius: var(--cp-r-md);
    padding: 18px;
}

.cp-home .cp-pro__check { color: var(--cp-teal); margin-top: 2px; }

.cp-home .cp-pro__item strong {
    display: block;
    font-size: 16px;
    color: var(--cp-white);
    margin-bottom: 2px;
}

.cp-home .cp-pro__item span { font-size: 14px; color: var(--cp-on-dark-3); }

/* ─── Nouveaux professionnels ────────────────────────────── */

.cp-home .cp-nouveaux { padding: 72px var(--cp-pad-x); }

.cp-home .cp-nouveaux__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.cp-home .cp-pro-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--cp-white);
    border: 1px solid var(--cp-border-subtle);
    border-radius: var(--cp-r-md);
    box-shadow: var(--cp-shadow-sm);
    padding: 20px;
    transition: box-shadow var(--cp-dur-base) var(--cp-ease),
                transform var(--cp-dur-base) var(--cp-ease);
}

.cp-home .cp-pro-card:hover { box-shadow: var(--cp-shadow-md); transform: translateY(-2px); }

.cp-home .cp-pro-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--cp-r-pill);
    object-fit: cover;
    margin-bottom: 14px;
}

.cp-home .cp-pro-card__avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cp-peach);
    color: var(--cp-coral);
    font-size: 18px;
    font-weight: 700;
}

.cp-home .cp-pro-card__name { font-size: 17px; margin: 0 0 4px; }
.cp-home .cp-pro-card__job  { font-size: 14px; color: var(--cp-fg-2); margin: 0 0 4px; }

.cp-home .cp-pro-card__city {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--cp-fg-3);
    margin: 0 0 10px;
}

.cp-home .cp-pro-card__verified {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cp-teal-700);
    margin: 0 0 16px;
}

.cp-home .cp-pro-card .cp-btn { margin-top: auto; }

.cp-home .cp-nouveaux__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 20px 24px;
    background: var(--cp-peach);
    border-radius: var(--cp-r-md);
}

.cp-home .cp-nouveaux__bar p { font-size: 16px; margin: 0; }

/* ─── Newsletter ─────────────────────────────────────────── */

.cp-home .cp-newsletter {
    background: var(--cp-peach);
    border-top: 1px solid var(--cp-border-subtle);
    padding: 64px var(--cp-pad-x);
}

.cp-home .cp-newsletter__inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    align-items: center;
}

.cp-home .cp-newsletter h2 { font-size: 26px; }
.cp-home .cp-newsletter p  { font-size: 16px; color: var(--cp-fg-2); margin: 0; }

.cp-home .cp-newsletter__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.cp-home .cp-newsletter__consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--cp-fg-3);
    line-height: 1.45;
}

.cp-home .cp-newsletter__consent input { margin-top: 3px; flex: none; }
.cp-home .cp-newsletter__consent a { color: var(--cp-teal-700); }

/* ─── Mouvement ──────────────────────────────────────────── */

@keyframes cpRise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {

    .cp-home *,
    .cp-home *::before,
    .cp-home *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .cp-home .cp-door:hover,
    .cp-home .cp-article:hover,
    .cp-home .cp-famille:hover,
    .cp-home .cp-pro-card:hover,
    .cp-home .cp-prenom-tile:hover {
        transform: none;
    }
}

/* ============================================================
   RESPONSIVE
   Le handoff ne spécifie pas le responsive ; les points de rupture
   480 / 768 / 1024 / 1280 viennent du design system, ainsi que la
   règle « les grilles multi-colonnes passent en une colonne sous
   768px » et « la grille d'articles perd sa hiérarchie ».
   ============================================================ */

@media (max-width: 1024px) {

    .cp-home { --cp-pad-x: 24px; }

    .cp-home .cp-hero__inner,
    .cp-home .cp-prenoms__inner,
    .cp-home .cp-pro__inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .cp-home .cp-hero__doors { padding-top: 0; flex-direction: row; }
    .cp-home .cp-hero__doors > * { flex: 1; }

    .cp-home .cp-hero__circle { width: 380px; height: 380px; top: -120px; right: -110px; }

    .cp-home .cp-familles__grid { grid-template-columns: repeat(2, 1fr); }
    .cp-home .cp-nouveaux__grid { grid-template-columns: repeat(2, 1fr); }

    .cp-home .cp-articles__row1 { grid-template-columns: 1fr; }
    .cp-home .cp-articles__row2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {

    .cp-home .cp-hero { padding-block: 40px 40px; }
    .cp-home .cp-hero__title { font-size: 40px; }
    .cp-home .cp-hero__lede { font-size: 17px; }

    .cp-home .cp-prenoms,
    .cp-home .cp-familles,
    .cp-home .cp-articles,
    .cp-home .cp-nouveaux { padding-block: 48px; }

    .cp-home .cp-newsletter { padding-block: 48px; }

    .cp-home h2 { font-size: 26px; }

    /* Les onglets gardent leur cible de 44px mais perdent leur libellé
       long : l'icône reste, le texte passe en 14px. */
    .cp-home .cp-hero-search__tab { font-size: 14px; gap: 6px; }

    .cp-home .cp-hero-search__form,
    .cp-home .cp-hero-search__form:has(.cp-field--wide) {
        grid-template-columns: 1fr;
    }

    .cp-home .cp-hero__doors { flex-direction: column; }

    .cp-home .cp-familles__grid,
    .cp-home .cp-nouveaux__grid,
    .cp-home .cp-articles__row2,
    .cp-home .cp-prenom-grid,
    .cp-home .cp-newsletter__inner {
        grid-template-columns: 1fr;
    }

    .cp-home .cp-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .cp-home .cp-nouveaux__bar { flex-direction: column; align-items: flex-start; }

    .cp-home .cp-jour { padding: 24px; min-height: 0; }
    .cp-home .cp-jour__name { font-size: 48px; }

    .cp-home .cp-article__media--lead { height: 200px; }
    .cp-home .cp-article__title--lead { font-size: 20px; }
    .cp-home .cp-article--lead .cp-article__body { padding: 20px; }

    .cp-home .cp-stats__inner { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 480px) {

    .cp-home { --cp-pad-x: 16px; }

    /* Les libellés longs (« Professionnels : inscription gratuite ») ne doivent
       pas forcer la page à défiler latéralement. */
    .cp-home .cp-btn {
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }

    .cp-home .cp-hero__title { font-size: 34px; }
    .cp-home .cp-hero__circle { display: none; }

    .cp-home .cp-hero-search__tab span { font-size: 13px; }

    .cp-home .cp-prenoms__cta .cp-btn { width: 100%; }

    .cp-home .cp-article--row .cp-article__link { grid-template-columns: 88px 1fr; gap: 12px; padding: 14px; }
}