/* ==========================================================================
   Potager Coach - page de vente (accueilNew.html)
   Toutes les règles sont préfixées par .pcn : la page est collée dans une page WordPress, ses styles ne doivent
   pas déborder sur le thème (et inversement, le moins possible).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Sour+Gummy:wght@400;600;700&family=Work+Sans:wght@400;500;600;700&display=swap');

.pcn {
    --pcn-bleu: #5d74b4;
    --pcn-bleu-fonce: #3d4f8a;
    --pcn-bleu-clair: #e9eefb;
    --pcn-orange: #ff8500;
    --pcn-orange-fonce: #e06f00;
    --pcn-jaune: #fecf65;
    --pcn-jaune-clair: #fff4d6;
    --pcn-rouge: #da3849;
    --pcn-rouge-clair: #fde8ea;
    /* Couleur du parcours expérimenté */
    --pcn-marine: #1f3a68;
    --pcn-marine-clair: #e6ecf6;
    --pcn-vert: #4c9a3c;
    --pcn-vert-clair: #e7f4e3;
    --pcn-nuit: #2b2e2a;
    --pcn-encre: #1f2733;
    --pcn-texte: #3f4856;
    --pcn-fond: #fbf8f1;
    --pcn-blanc: #ffffff;
    --pcn-rayon: 24px;
    --pcn-ombre: 0 10px 30px rgba(31, 39, 51, 0.10);
    --pcn-ombre-forte: 0 18px 45px rgba(31, 39, 51, 0.18);
    --pcn-police-titre: 'Sour Gummy', 'Fredoka', 'Work Sans', system-ui, sans-serif;
    --pcn-police-marque: 'Fredoka One', 'Fredoka', 'Sour Gummy', system-ui, sans-serif;
    --pcn-police-texte: 'Work Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    font-family: var(--pcn-police-texte);
    font-size: 18px;
    line-height: 1.6;
    color: var(--pcn-texte);
    background: var(--pcn-fond);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
/* Pleine largeur une fois la page collée dans WordPress : le thème enferme son contenu dans une colonne
   centrée (souvent 800 à 1200 px), alors que le hero, les bandeaux photo et les sections colorées doivent
   filer d'un bord à l'autre de l'écran. Même procédé que l'ancienne page (.accueil_main dans custom.css) :
   la page sort du flux du thème et se cale en haut à gauche du document, sur toute sa largeur. */
.pcn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}
.pcn *, .pcn *::before, .pcn *::after { box-sizing: border-box; }
.pcn img, .pcn video, .pcn iframe { max-width: 100%; display: block;margin-bottom: 0px; }
.pcn a { color: var(--pcn-bleu-fonce); }
/* Marge par défaut des paragraphes, posée avec :where() pour qu'elle ne prenne pas le pas sur les règles de
   classe qui suivent. Sans cela, ".pcn p" (une classe + un élément) l'emporte sur ".pcn-hero-accroche" (une
   classe seule) : les "margin: 0 auto" des paragraphes du hero étaient écrasés, et ces blocs, pourtant plus
   étroits que la page, se calaient à gauche au lieu d'être centrés. */
.pcn :where(p) { margin: 0 0 1em 0; }
.pcn h1, .pcn h2, .pcn h3, .pcn h4 {
    font-family: var(--pcn-police-titre);
    color: var(--pcn-encre);
    line-height: 1.15;
    margin: 0 0 0.5em 0;
    font-weight: 700;
}
.pcn h2 { font-size: clamp(30px, 4.2vw, 46px); }
.pcn h3 { font-size: clamp(24px, 3vw, 32px); }
.pcn h4 { font-size: 22px; }

.pcn-conteneur {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 32px);
}

/* Nom "Potager Coach" dans le texte */
.pcn-marque {
    font-family: var(--pcn-police-marque);
    color: var(--pcn-orange);
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.pcn-surligne {
    background: linear-gradient(transparent 58%, var(--pcn-jaune) 58%);
    padding: 0 3px;
}
.pcn-nowrap { white-space: nowrap; }

/* ---------- Boutons ---------- */
.pcn-bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 999px;
    font-family: var(--pcn-police-titre);
    font-size: 20px;
    font-weight: 700;
    text-decoration: none !important;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
    line-height: 1.2;
}
.pcn-bouton:hover { transform: translateY(-2px); }
.pcn-bouton-principal {
    background: var(--pcn-orange);
    color: var(--pcn-blanc) !important;
    box-shadow: 0 8px 22px rgba(255, 133, 0, 0.38);
}
.pcn-bouton-principal:hover { background: var(--pcn-orange-fonce); box-shadow: 0 12px 28px rgba(255, 133, 0, 0.45); }
.pcn-bouton-secondaire {
    background: rgba(255, 255, 255, 0.95);
    color: var(--pcn-encre) !important;
    border-color: rgba(255, 255, 255, 0.95);
}
.pcn-bouton-contour {
    background: transparent;
    color: var(--pcn-encre) !important;
    border-color: var(--pcn-encre);
}
.pcn-bouton-petit { padding: 10px 20px; font-size: 17px; }

/* ---------- Hero ---------- */
.pcn-hero {
    position: relative;
    overflow: hidden;
    color: var(--pcn-blanc);
    text-align: center;
    padding-block: clamp(70px, 11vw, 130px) clamp(90px, 12vw, 150px);
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 207, 101, 0.55) 0, rgba(255, 207, 101, 0) 26%),
        linear-gradient(180deg, #4f66a8 0%, #6f87c9 55%, #9fb4e6 100%);
}
.pcn-soleil {
    position: absolute;
    top: clamp(24px, 5vw, 60px);
    right: 12%;
    width: clamp(70px, 9vw, 110px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe08a 0%, #ffb52e 55%, #ff9b0f 100%);
    box-shadow: 0 0 40px #ffb52e, 0 0 110px rgba(255, 181, 46, 0.7);
    animation: pcn-pulse 6s ease-in-out infinite;
}
.pcn-nuage {
    position: absolute;
    width: 180px;
    height: 56px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 60px;
    filter: blur(1px);
    animation: pcn-nuage 60s linear infinite;
}
.pcn-nuage::before, .pcn-nuage::after {
    content: "";
    position: absolute;
    background: inherit;
    border-radius: 50%;
}
.pcn-nuage::before { width: 80px; height: 80px; top: -38px; left: 26px; }
.pcn-nuage::after { width: 100px; height: 100px; top: -52px; left: 70px; }
.pcn-nuage-1 { top: 22%; left: -220px; }
/* Départ à droite des écritures du hero, qui sont centrées sur 640 à 820 px de large : ce nuage ne
   traverse donc que la moitié droite du ciel, et jamais l'arrière du titre ni des boutons.
   --pcn-nuage-course limite sa course à la sortie par la droite, et --pcn-nuage-echelle porte sa
   taille, une animation qui pose transform écrasant un scale déclaré sur l'élément. */
.pcn-nuage-2 { top: 58%; left: calc(50% + 420px); --pcn-nuage-course: calc(50vw - 160px); --pcn-nuage-echelle: 0.7; animation-duration: 45s; opacity: 0.7; }
.pcn-herbe {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 50px;
    /* La silhouette du SVG est blanche : employée en masque plutôt qu'en image de fond, l'herbe prend la
       couleur de la section qui suit le hero (--pcn-fond, crème) au lieu d'un blanc qui trahissait le raccord. */
    background: var(--pcn-fond);
    -webkit-mask-image: url(https://potagercoach.com/resources/grass.svg);
    mask-image: url(https://potagercoach.com/resources/grass.svg);
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    -webkit-mask-position: left bottom;
    mask-position: left bottom;
}
.pcn-hero-contenu { position: relative; z-index: 2; }
.pcn-hero-surtitre {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    font-family: var(--pcn-police-titre);
    font-size: clamp(16px, 2vw, 20px);
    margin-bottom: 14px;
}
.pcn-hero h1, .pcn-hero .pcn-titre-marque {
    font-family: var(--pcn-police-marque);
    font-size: clamp(52px, 10vw, 104px);
    line-height: 1;
    color: var(--pcn-orange);
    margin-bottom: 12px;
    text-shadow: 0 3px 0 #fff, 0 8px 24px rgba(0, 0, 0, 0.25);
    -webkit-text-stroke: 2px #fff;
    paint-order: stroke fill;
}
.pcn-hero-accroche {
    font-family: var(--pcn-police-titre);
    font-size: clamp(28px, 4.6vw, 48px);
    line-height: 1.15;
    color: var(--pcn-blanc);
    margin: 0 auto 16px auto;
    max-width: 820px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.pcn-hero-texte {
    font-size: clamp(17px, 2vw, 21px);
    max-width: 640px;
    margin: 0 auto 30px auto;
    color: rgba(255, 255, 255, 0.95);
}
.pcn-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 28px;
}
.pcn-confiance {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}
.pcn-confiance li {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.16);
    padding: 6px 14px;
    border-radius: 999px;
}

/* ---------- Sections ---------- */
.pcn-section { padding-block: clamp(56px, 8vw, 96px); position: relative; }
.pcn-section-claire { background: var(--pcn-blanc); }
.pcn-entete-section { text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 5vw, 56px) auto; }
.pcn-entete-section p { font-size: 19px; }
.pcn-sur-titre {
    display: inline-block;
    font-family: var(--pcn-police-titre);
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--pcn-bleu);
    margin-bottom: 8px;
}

/* ---------- Choix débutant / expérimenté ---------- */
.pcn-profils {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 32px);
    margin-top: calc(-1 * clamp(80px, 10vw, 120px));
    position: relative;
    z-index: 3;
}
.pcn-profil {
    background: var(--pcn-blanc);
    border-radius: var(--pcn-rayon);
    box-shadow: var(--pcn-ombre-forte);
    padding: clamp(24px, 3.5vw, 38px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    border-top: 8px solid var(--pcn-vert);
    transition: transform .25s ease, box-shadow .25s ease;
}
.pcn-profil:hover { transform: translateY(-4px); }
.pcn-profil-experimente { border-top-color: var(--pcn-marine); }
.pcn-profil-tete { display: flex; align-items: center; gap: 15px; }
.pcn-profil-avatar {
    width: 128px;
    height: 128px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--pcn-vert-clair);
    overflow: hidden;
}
.pcn-profil-experimente .pcn-profil-avatar { background: var(--pcn-marine-clair); }
.pcn-profil-avatar img { width: 100%; height: 100%; object-fit: contain; }
.pcn-profil h3 { 
    margin-top: 7px;
    margin-bottom: 0; 
    margin-left: 0; 
    margin-right: 0; 
    font-size: 34px;
}
.pcn-profil p { margin: 0; flex: 1; }
.pcn-etiquette {
    display: table-caption;;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 12px;
    border-radius: 999px;
    color: var(--pcn-blanc);
    background: var(--pcn-vert);
}
.pcn-profil-experimente .pcn-etiquette { background: var(--pcn-marine); }
.pcn-etiquette-rouge { background: var(--pcn-rouge); }
.pcn-etiquette-jaune { background: var(--pcn-jaune); color: var(--pcn-encre); }
.pcn-nb-abonnes{
    padding: 10px 12px;
    width: 114px;
}
.pcn-lien-fleche {
    font-family: var(--pcn-police-titre);
    font-weight: 700;
    font-size: 19px;
    text-decoration: none !important;
    color: var(--pcn-vert) !important;
}
.pcn-profil-experimente .pcn-lien-fleche { color: var(--pcn-marine) !important; }

/* ---------- Vidéo de présentation ---------- */
.pcn-video-principale {
    max-width: 880px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--pcn-rayon);
    overflow: hidden;
    box-shadow: var(--pcn-ombre-forte);
    background: #000;
}
.pcn-video-principale iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Grille des fonctionnalités ---------- */
.pcn-grille-fonctions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}
.pcn-fonction {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    background: var(--pcn-blanc);
    border-radius: 18px;
    box-shadow: var(--pcn-ombre);
    text-decoration: none !important;
    color: var(--pcn-encre) !important;
    font-family: var(--pcn-police-titre);
    font-size: 20px;
    line-height: 1.25;
    transition: transform .2s ease, box-shadow .2s ease;
}
.pcn-fonction:hover { transform: translateY(-3px); box-shadow: var(--pcn-ombre-forte); }
.pcn-fonction-icone {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 28px;
    background: var(--pcn-bleu-clair);
}
.pcn-fonction-nouveau .pcn-fonction-icone { background: var(--pcn-jaune-clair); }
.pcn-badge-nouveau {
    position: absolute;
    top: -10px;
    right: 14px;
    background: var(--pcn-rouge);
    color: var(--pcn-blanc);
    font-family: var(--pcn-police-texte);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
}

/* ---------- Bandeaux de parcours (débutant / expérimenté) ---------- */
/* Photo du potager (--pcn-photo, posée par le script au chargement différé) sous un voile de couleur qui garde le
   texte lisible. */
.pcn-parcours {
    text-align: center;
    color: var(--pcn-blanc);
    padding-block: clamp(64px, 9vw, 110px);
    background-color: var(--pcn-vert);
    background-image:
        linear-gradient(135deg, rgba(47, 110, 38, 0.90) 0%, rgba(76, 154, 60, 0.82) 60%, rgba(124, 191, 94, 0.72) 100%),
        var(--pcn-photo, linear-gradient(transparent, transparent));
    background-size: cover;
    background-position: center;
}
.pcn-parcours-experimente {
    background-color: var(--pcn-marine);
    background-image:
        linear-gradient(135deg, rgba(18, 34, 66, 0.92) 0%, rgba(31, 58, 104, 0.85) 60%, rgba(52, 88, 148, 0.75) 100%),
        var(--pcn-photo, linear-gradient(transparent, transparent));
}
.pcn-parcours h2 { color: var(--pcn-blanc); margin-bottom: 10px; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25); }
.pcn-parcours p { font-size: clamp(18px, 2.2vw, 22px); max-width: 720px; margin: 0 auto; opacity: .95; }
.pcn-parcours .pcn-etiquette { background: rgba(255, 255, 255, 0.22); margin-bottom: 14px; }

/* Encart "Le saviez-vous ?" dans le bandeau du parcours débutant */
.pcn-saviez-vous {
    max-width: 680px;
    margin: 30px auto 0 auto;
    padding: clamp(18px, 3vw, 28px);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--pcn-texte);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
    text-shadow: none;
}
.pcn-saviez-vous-titre {
    font-family: var(--pcn-police-titre);
    font-size: 22px;
    font-weight: 700;
    color: var(--pcn-vert);
    margin-bottom: 12px;
}
.pcn-saviez-vous-equation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    margin-bottom: 14px;
}
.pcn-saviez-vous-terme {
    font-family: var(--pcn-police-titre);
    font-size: clamp(20px, 2.6vw, 26px);
    font-weight: 700;
    color: var(--pcn-encre);
    background: var(--pcn-vert-clair);
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}
.pcn-saviez-vous-resultat { background: var(--pcn-jaune); }
.pcn-saviez-vous-signe {
    font-family: var(--pcn-police-titre);
    font-size: 28px;
    font-weight: 700;
    color: var(--pcn-vert);
}
.pcn-parcours .pcn-saviez-vous p {
    max-width: none;
    margin: 0;
    font-size: 17px;
    opacity: 1;
}

/* ---------- Blocs fonctionnalité (texte + média) ---------- */
.pcn-bloc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}
.pcn-bloc + .pcn-bloc { margin-top: clamp(56px, 8vw, 96px); }
.pcn-bloc-inverse .pcn-bloc-texte { order: 2; }
.pcn-bloc-texte h3 { margin-bottom: 14px; }
.pcn-bloc-texte > p { font-size: 19px; }
.pcn-media {
    border-radius: var(--pcn-rayon);
    overflow: hidden;
    box-shadow: var(--pcn-ombre-forte);
    background: var(--pcn-blanc);
}
.pcn-media img { width: 100%; height: auto; }

.pcn-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.pcn-liste {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2em 0;
}
.pcn-liste li {
    position: relative;
    padding-left: 36px;
    margin-bottom: 10px;
}
.pcn-liste li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--pcn-blanc);
    background: var(--pcn-vert);
}
.pcn-zone-experimente .pcn-liste li::before { background: var(--pcn-marine); }

.pcn-encart {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--pcn-jaune-clair);
    border-left: 6px solid var(--pcn-jaune);
    border-radius: 14px;
    padding: 16px 20px;
    font-size: 17px;
    margin-top: 10px;
}
.pcn-encart-icone { font-size: 26px; line-height: 1; }

/* ---------- Encadré "un outil puissant et libre" (parcours expérimenté) ---------- */
.pcn-atouts {
    margin-top: clamp(56px, 8vw, 96px);
    padding: clamp(24px, 4vw, 48px);
    border-radius: var(--pcn-rayon);
    background: var(--pcn-marine-clair);
    border: 2px solid rgba(31, 58, 104, 0.15);
}
.pcn-atouts + .pcn-bloc { margin-top: clamp(56px, 8vw, 96px); }
.pcn-atouts-entete { text-align: center; max-width: 760px; margin: 0 auto 28px auto; }
.pcn-atouts-entete .pcn-sur-titre { color: var(--pcn-marine); }
.pcn-atouts-entete p { font-size: 19px; margin: 0; }
.pcn-atouts-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.pcn-atout {
    background: var(--pcn-blanc);
    border-radius: 18px;
    padding: 22px 24px;
    box-shadow: var(--pcn-ombre);
}
.pcn-atout-icone {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--pcn-marine-clair);
    font-size: 26px;
    margin-bottom: 10px;
}
.pcn-atout h4 { margin-bottom: 6px; }
.pcn-atout p { margin: 0; font-size: 17px; }
@media (max-width: 720px) {
    .pcn-atouts-grille { grid-template-columns: minmax(0, 1fr); }
    .pcn-atouts-entete p { font-size: 17px; }
}

/* ---------- Cartouche de mise en avant (ex : "Du vécu, pas du générique") ---------- */
.pcn-cartouche {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 6px;
    padding: 18px 22px;
    border-radius: 18px;
    background: var(--pcn-vert-clair);
    border: 2px solid var(--pcn-vert);
    box-shadow: 0 8px 22px rgba(76, 154, 60, 0.18);
}
/* Vraie photo du potager avec sa légende : la preuve par l'image de ce que dit le cartouche. */
.pcn-cartouche-photo {
    flex-shrink: 0;
    width: 180px;
    margin: 0;
}
.pcn-cartouche-photo img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 3px solid var(--pcn-blanc);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.pcn-cartouche-photo figcaption {
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.3;
    font-style: italic;
    text-align: center;
    color: var(--pcn-texte);
}
.pcn-cartouche-titre {
    font-family: var(--pcn-police-titre);
    font-size: 22px;
    font-weight: 700;
    color: var(--pcn-vert);
    line-height: 1.2;
    margin-bottom: 4px;
}
.pcn-cartouche p { margin: 0; font-size: 17px; color: var(--pcn-encre); }
@media (max-width: 520px) {
    .pcn-cartouche { padding: 14px 16px; gap: 12px; flex-direction: column; align-items: center; }
    .pcn-cartouche-photo { width: 100%; max-width: 260px; }
}

/* "En savoir plus" : <details> natif, pas de JavaScript */
.pcn-plus { margin-top: 10px; }
.pcn-plus summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-family: var(--pcn-police-titre);
    font-weight: 700;
    font-size: 18px;
    color: var(--pcn-bleu-fonce);
    padding: 8px 18px;
    border-radius: 999px;
    background: var(--pcn-bleu-clair);
    transition: background-color .2s ease;
}
.pcn-plus summary::-webkit-details-marker { display: none; }
.pcn-plus summary::after { content: "＋"; }
.pcn-plus[open] summary::after { content: "－"; }
.pcn-plus summary:hover { background: #dbe3f7; }
.pcn-plus-contenu { padding-top: 18px; }

/* ---------- Carrousel (défilement natif au doigt, flèches, pastilles) ---------- */
/* Les diapositives ne font que 88 % de la largeur : les voisines dépassent de chaque côté, ce qui fait
   comprendre d'un coup d'œil qu'il y a d'autres images. La barre de pastilles et le compteur sous les images
   sont ajoutés par le script (voir accueilNew.html) : inutile de les écrire dans chaque carrousel. */
/* Hauteur imposée par le carrousel : sans elle, la piste change de hauteur à chaque image, selon les
   proportions de celle-ci. Surchargeable carrousel par carrousel (style="--pcn-carrousel-hauteur: 360px"). */
.pcn-carrousel {
    position: relative;
    background: var(--pcn-blanc);
    --pcn-carrousel-hauteur: clamp(180px, 46vw, 300px);
}
.pcn-carrousel-piste {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    cursor: grab;
}
.pcn-carrousel-piste::-webkit-scrollbar { display: none; }
/* Pendant un cliquer-glisser à la souris (voir accueilNew.html) : aimantation et défilement animé désactivés,
   sinon la piste revient en arrière pendant le mouvement. Le script les rétablit au relâchement. */
.pcn-carrousel-piste.pcn-glisse {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}
/* Sans ça, le navigateur démarre son propre glisser d'image au lieu de faire défiler la piste. */
.pcn-carrousel-piste img, .pcn-carrousel-piste video {
    user-select: none;
    -webkit-user-drag: none;
}
.pcn-carrousel-piste > * {
    flex: 0 0 88%;
    height: var(--pcn-carrousel-hauteur);
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 14px;
    background: var(--pcn-blanc);
    box-shadow: 0 2px 10px rgba(31, 39, 51, 0.12);
}
/* L'image (ou la vidéo) prend toute la hauteur de la diapositive et garde ses proportions : sa largeur suit,
   et elle est centrée horizontalement. max-width évite qu'une image très large dépasse de la diapositive. */
.pcn-carrousel-piste img, .pcn-carrousel-piste video {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin: 0 auto;
}
.pcn-cover{
    object-fit: cover !important;
    height: 100% !important;
    width: 100% !important;
}
/* Texte superposé à une image de carrousel. Envelopper l'image dans un .pcn-diapo, puis ajouter autant de
   .pcn-diapo-texte que voulu, chacun avec 3 classes :
     couleur  : pcn-diapo-blanc (blanc cerclé de noir) | pcn-diapo-orange (orange Potager Coach cerclé de blanc)
     taille   : pcn-diapo-l | pcn-diapo-xl | pcn-diapo-xxl
     position : pcn-diapo-haut | pcn-diapo-milieu | pcn-diapo-bas
   Le texte fait partie de la diapositive : il défile donc avec son image. */
.pcn-diapo { position: relative; }
.pcn-diapo-texte {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    padding: 0 14px;
    text-align: center;
    font-family: var(--pcn-police-titre);
    font-weight: 700;
    line-height: 1.15;
    z-index: 2;
    /* Ne capture ni la souris ni le doigt : le cliquer-glisser et le défilement au doigt passent au travers. */
    pointer-events: none;
    user-select: none;
}
.pcn-diapo-haut { top: 12px; }
.pcn-diapo-milieu { top: 50%; transform: translateY(-50%); }
.pcn-diapo-bas { bottom: 12px; }
.pcn-diapo-l { font-size: clamp(16px, 3.4vw, 22px); }
.pcn-diapo-xl { font-size: clamp(20px, 4.4vw, 30px); }
.pcn-diapo-xxl { font-size: clamp(24px, 5.6vw, 40px); }
/* Contour en em pour qu'il grossisse avec le texte ; paint-order garde le contour SOUS la lettre, sinon il la
   ronge. text-shadow en plus : détache le texte des zones claires de la photo. */
.pcn-diapo-blanc {
    color: var(--pcn-blanc);
    -webkit-text-stroke: 0.085em #000;
    paint-order: stroke fill;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.pcn-diapo-orange {
    color: var(--pcn-orange);
    -webkit-text-stroke: 0.085em var(--pcn-blanc);
    paint-order: stroke fill;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.pcn-carrousel-bouton {
    position: absolute;
    top: calc(50% - 26px);
    z-index: 3;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 2px solid var(--pcn-bleu-clair);
    background: var(--pcn-blanc);
    color: var(--pcn-bleu-fonce);
    font-family: var(--pcn-police-titre);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(31, 39, 51, 0.25);
    transition: transform .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease;
}
.pcn-carrousel-bouton:hover { background: var(--pcn-bleu); color: var(--pcn-blanc); transform: scale(1.06); }
/* Estompée plutôt que masquée en bout de course : le carrousel reste identifiable comme tel. */
.pcn-carrousel-bouton:disabled { opacity: .3; cursor: default; box-shadow: none; }
.pcn-carrousel-bouton:disabled:hover { background: var(--pcn-blanc); color: var(--pcn-bleu-fonce); transform: none; }
.pcn-carrousel-precedent { left: 6px; }
.pcn-carrousel-suivant { right: 6px; }

/* Barre sous les images : pastilles cliquables, compteur, et rappel du geste sur écran tactile */
.pcn-carrousel-barre {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 12px 12px 12px;
    background: var(--pcn-blanc);
}
.pcn-carrousel-puces { display: flex; align-items: center; gap: 8px; }
.pcn-carrousel-puce {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cbd3e2;
    cursor: pointer;
    transition: width .25s ease, background-color .25s ease;
}
.pcn-carrousel-puce:hover { background: var(--pcn-bleu); }
.pcn-carrousel-puce.pcn-active { width: 28px; border-radius: 999px; background: var(--pcn-bleu); }
.pcn-carrousel-compteur {
    font-size: 14px;
    font-weight: 600;
    color: var(--pcn-texte);
    font-variant-numeric: tabular-nums;
}
.pcn-carrousel-glisser { font-size: 14px; color: var(--pcn-texte); }
/* Rappel du geste réservé aux écrans tactiles : sur ordinateur, les flèches suffisent. */
@media (hover: hover) {
    .pcn-carrousel-glisser { display: none; }
}
@media (max-width: 520px) {
    .pcn-carrousel-bouton { width: 42px; height: 42px; font-size: 24px; top: calc(50% - 21px); }
    .pcn-carrousel-piste > * { flex: 0 0 90%; }
}
/* Visionneuse plein écran des images de carrousel, créée par le script de la page sur écran tactile
   uniquement. Au-dessus de la barre d'abonnement collante (z-index 9999). */
@media (hover: none) and (pointer: coarse) {
    .pcn-carrousel-piste img { cursor: zoom-in; }
}
.pcn-visionneuse {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 8px;
    background: rgba(15, 18, 24, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s;
}
.pcn-visionneuse.pcn-ouverte { opacity: 1; visibility: visible; }
.pcn-visionneuse img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
}
.pcn-visionneuse-legende {
    color: var(--pcn-blanc);
    text-align: center;
    font-size: 16px;
    max-width: 640px;
}
.pcn-visionneuse-legende:empty { display: none; }
.pcn-visionneuse-fermer {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: var(--pcn-blanc);
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}
/* Page figée derrière la visionneuse ouverte. */
html.pcn-sans-defilement { overflow: hidden; }
/* ---------- Bandeaux photo du potager ---------- */
/* Une ou plusieurs photos côte à côte (mosaïque), avec une phrase par-dessus. Le cadre des photos déborde de 12 % en
   haut et en bas : c'est la marge dans laquelle le script les fait glisser au défilement (effet de profondeur). */
.pcn-bandeau {
    position: relative;
    height: clamp(260px, 40vw, 480px);
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--pcn-nuit);
}
.pcn-bandeau-photos {
    position: absolute;
    left: 0;
    right: 0;
    top: -12%;
    bottom: -12%;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 6px;
    will-change: transform;
}
.pcn-bandeau-photo {
    background-color: #5f7f45;
    background-image: var(--pcn-photo, none);
    background-size: cover;
    background-position: center;
}
.pcn-bandeau::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(15, 20, 15, 0.45) 0%, rgba(15, 20, 15, 0.18) 70%);
    pointer-events: none;
}
.pcn-bandeau-texte {
    position: relative;
    z-index: 2;
    margin: 0;
    padding: 0 20px;
    max-width: 900px;
    text-align: center;
    color: var(--pcn-blanc);
    font-family: var(--pcn-police-titre);
    font-size: clamp(26px, 4.6vw, 54px);
    line-height: 1.15;
    font-weight: 700;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.6);
}

/* ---------- Nouveautés lune & météo ---------- */
.pcn-nouveautes {
    background: linear-gradient(180deg, #1f2a4d 0%, #2f3f73 100%);
    color: #e7ecfb;
}
.pcn-nouveautes h2, .pcn-nouveautes h3 { color: var(--pcn-blanc); }
.pcn-nouveautes .pcn-sur-titre { color: var(--pcn-jaune); }
.pcn-nouveautes .pcn-liste li::before { background: var(--pcn-jaune); color: var(--pcn-encre); }
.pcn-nouveautes .pcn-media { box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4); }
/* Mention discrète, en marge de l'argumentaire (ex : la gestion du calendrier lunaire) : présente pour ceux
   que ça intéresse, sans prendre la place du sujet principal de la section. */
.pcn-note {
    margin-top: 18px;
    padding-left: 14px;
    border-left: 3px solid rgba(254, 207, 101, 0.6);
    font-size: 16px;
    opacity: 0.85;
}

/* ---------- Club ---------- */
.pcn-club { background: var(--pcn-nuit); color: #e9ebe8; }
.pcn-club h3 { color: var(--pcn-blanc); }
.pcn-club .pcn-liste li::before { background: var(--pcn-orange); }

/* ---------- Mot du créateur ---------- */
.pcn-createur {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
    background: var(--pcn-jaune-clair);
    border-radius: var(--pcn-rayon);
    padding: clamp(24px, 4vw, 48px);
}
.pcn-createur img { width: 100%; border-radius: 18px; box-shadow: var(--pcn-ombre); }
.pcn-signature { font-family: var(--pcn-police-titre); font-size: 22px; color: var(--pcn-encre); }

/* ---------- Avis clients ---------- */
.pcn-avis {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 4px 18px 4px;
}
.pcn-avis img {
    flex: 0 0 min(420px, 86%);
    scroll-snap-align: start;
    border-radius: 6px;
    box-shadow: var(--pcn-ombre);
    background: var(--pcn-blanc);
    height: auto;
    align-self: flex-start;
}

/* ---------- Offre ---------- */
.pcn-offre {
    background: linear-gradient(180deg, var(--pcn-fond) 0%, #eef2fb 100%);
}
.pcn-carte-offre {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: var(--pcn-blanc);
    border-radius: 30px;
    padding: clamp(28px, 5vw, 48px);
    box-shadow: var(--pcn-ombre-forte);
    border: 3px solid var(--pcn-bleu-clair);
}
.pcn-prix {
    font-family: var(--pcn-police-marque);
    font-size: clamp(64px, 11vw, 88px);
    line-height: 1;
    color: var(--pcn-orange);
    margin: 10px 0 4px 0;
}
.pcn-prix small { font-size: 0.35em; color: var(--pcn-encre); font-family: var(--pcn-police-titre); }
.pcn-prix-mois { font-size: 18px; margin-bottom: 22px; }
.pcn-carte-offre .pcn-liste { text-align: left; max-width: 400px; margin: 0 auto 26px auto; }
.pcn-garantie { margin-top: 18px; font-size: 16px; }

/* ---------- Pages intérieures (FAQ, CGV, contact, mentions...) ---------- */
/* Même hero que la page de vente, mais raccourci : ces pages sont consultées pour leur contenu, le décor ne
   doit pas repousser le texte sous la ligne de flottaison. */
.pcn-hero-court { padding-block: clamp(36px, 6vw, 64px) clamp(56px, 8vw, 90px); }
.pcn-hero-court h1, .pcn-hero-court .pcn-titre-marque { font-size: clamp(38px, 6vw, 64px); }
/* L'herbe prend la couleur de ce qui suit le hero : le fond crème de la page de vente, mais le blanc des pages
   intérieures, dont le contenu est posé sur une section claire. */
.pcn-hero-court .pcn-herbe { background: var(--pcn-blanc); }
/* Titre de la page, sorti du bandeau du haut : sur le ciel, il passait inaperçu derrière le nom de la marque.
   Ici, sur fond clair et en tête du contenu, il annonce clairement de quelle page il s'agit. */
.pcn-titre-page {
    text-align: center;
    font-size: clamp(30px, 4.2vw, 46px);
    margin-bottom: clamp(28px, 4vw, 44px);
}
.pcn-hero-court .pcn-hero-accroche { font-size: clamp(24px, 3.4vw, 36px); margin-bottom: 0; }
/* Colonne de lecture : une largeur confortable pour du texte suivi, plus étroite que la page de vente. */
.pcn-doc { max-width: 820px; }
.pcn-doc h2 { font-size: clamp(24px, 3vw, 30px); margin-top: 1.6em; }
.pcn-titre-page + h2 { margin-top: 0; }
.pcn-doc p { margin-bottom: 1em; }
.pcn-doc-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.pcn-doc h3 { font-size: clamp(20px, 2.4vw, 24px); margin-top: 1.4em; }
.pcn-doc-maj { font-size: 15px; color: var(--pcn-bleu); margin-bottom: 2em; }
/* Mention à remplacer avant mise en ligne : surlignée pour qu'un oubli saute aux yeux sur la page publiée. */
.pcn-a-completer { background: #fff3cd; border-bottom: 2px dotted #e0a800; padding: 0 3px; font-weight: 600; }
/* Carte centrée des pages intérieures : adresse de contact, accès au logiciel... À ne pas confondre avec
   .pcn-encart, l'encadré jaune en ligne de la page de vente, qui porte un display: flex. */
.pcn-carte-info {
    background: var(--pcn-blanc);
    border: 1px solid var(--pcn-bleu-clair);
    border-radius: var(--pcn-rayon);
    box-shadow: var(--pcn-ombre);
    padding: clamp(24px, 4vw, 36px);
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
}
.pcn-carte-info-mail {
    display: inline-block;
    font-family: var(--pcn-police-titre);
    font-size: clamp(20px, 3vw, 26px);
    margin-top: 6px;
}
/* FAQ : une question par dépliant, fermé à l'arrivée pour que la liste des questions tienne d'un coup d'œil. */
.pcn-faq {
    background: var(--pcn-blanc);
    border: 1px solid var(--pcn-bleu-clair);
    border-radius: 18px;
    box-shadow: var(--pcn-ombre);
    margin-bottom: 14px;
    overflow: hidden;
}
.pcn-faq > summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: 18px 22px 18px 52px;
    font-family: var(--pcn-police-titre);
    font-size: clamp(18px, 2.4vw, 22px);
    font-weight: 700;
    color: var(--pcn-encre);
}
.pcn-faq > summary::-webkit-details-marker { display: none; }
/* Le "+" pivote d'un huitième de tour pour devenir une croix : un changement de caractère ne s'anime pas,
   une rotation si. */
.pcn-faq > summary::before {
    content: '+';
    position: absolute;
    left: 22px;
    top: 18px;
    color: var(--pcn-orange);
    font-size: 26px;
    line-height: 1.1;
    transition: transform .25s ease;
}
.pcn-faq[open] > summary::before { transform: rotate(135deg); }
.pcn-faq > summary:hover { background: var(--pcn-bleu-clair); }
.pcn-faq-reponse { padding: 0 22px 20px 22px; }
.pcn-faq-reponse p:last-child { margin-bottom: 0; }
.pcn-faq-reponse img { border-radius: 12px; margin-top: 12px; }
/* Ouverture et fermeture en douceur. Un <details> ne s'anime pas de lui-même : sa hauteur ne devient animable
   que si le navigateur sait interpoler "auto" (interpolate-size) et cibler ::details-content. Sur un navigateur
   plus ancien, le dépliant fonctionne normalement, sans animation de hauteur. */
@supports (interpolate-size: allow-keywords) {
    .pcn { interpolate-size: allow-keywords; }
    .pcn-faq::details-content { height: 0; overflow: hidden; transition: height .3s ease, content-visibility .3s allow-discrete; }
    .pcn-faq[open]::details-content { height: auto; }
}
/* Apparition de la réponse, qui fonctionne partout, y compris sans le support ci-dessus. */
.pcn-faq[open] > .pcn-faq-reponse { animation: pcn-faq-apparition .3s ease both; }
@keyframes pcn-faq-apparition {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ---------- Pied de page ---------- */
.pcn-pied {
    background: var(--pcn-bleu-fonce);
    color: rgba(255, 255, 255, 0.9);
    padding-block: 26px;
    text-align: center;
    font-size: 16px;
}
.pcn-pied nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-bottom: 10px; }
.pcn-pied a { color: var(--pcn-blanc) !important; text-decoration: none; }
.pcn-pied a:hover { text-decoration: underline; }

/* ---------- Barre d'abonnement collante (téléphone) ---------- */
.pcn-barre-mobile {
    display: none;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 10px 10px 18px;
    border-radius: 999px;
    background: var(--pcn-encre);
    color: var(--pcn-blanc);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transform: translateY(150%);
    transition: transform .35s ease;
}
.pcn-barre-mobile.pcn-visible { transform: translateY(0); }
.pcn-barre-mobile strong { font-family: var(--pcn-police-titre); font-size: 19px; }

.pcn-center {
    display:flex;
    align-items:center;
    justify-content:center;
}

.pcn video{
    width: 100%;
    max-width:700px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--pcn-rayon);    
}

/* ---------- Apparition au défilement (uniquement si JavaScript actif) ---------- */
.pcn-js .pcn-apparition { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.pcn-js .pcn-apparition.pcn-visible { opacity: 1; transform: none; }

@keyframes pcn-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@keyframes pcn-nuage {
    from { transform: translateX(0) scale(var(--pcn-nuage-echelle, 1)); }
    to { transform: translateX(var(--pcn-nuage-course, calc(100vw + 440px))) scale(var(--pcn-nuage-echelle, 1)); }
}
@media (prefers-reduced-motion: reduce) {
    .pcn *, .pcn *::before, .pcn *::after { animation: none !important; transition: none !important; }
    .pcn-js .pcn-apparition { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
    .pcn-grille-fonctions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .pcn-bloc { grid-template-columns: minmax(0, 1fr); }
    .pcn-bloc-inverse .pcn-bloc-texte { order: 0; }
    .pcn-createur { grid-template-columns: minmax(0, 1fr); text-align: left; }
    .pcn-createur img { max-width: 260px; margin: 0 auto; }

    /* Bloc à média remonté juste avant la première liste du texte, après le titre et les paragraphes
       d'accroche (ex : vidéo du calendrier personnalisé, carrousel des agendas) : sur une seule colonne, on
       entre dans le vif du sujet au lieu de faire lire tout le texte avant de voir l'outil. Le bloc de texte
       s'efface (display: contents) pour que ses éléments puissent être ordonnés avec le média, en flex plutôt
       qu'en grille pour ne pas intercaler l'espacement du bloc entre chaque paragraphe. */
    .pcn-bloc-media-sous-titre { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
    .pcn-bloc-media-sous-titre > .pcn-bloc-texte { display: contents; }
    .pcn-bloc-media-sous-titre > .pcn-bloc-texte > * { order: 1; }
    .pcn-bloc-media-sous-titre > .pcn-bloc-texte > ul:first-of-type,
    .pcn-bloc-media-sous-titre > .pcn-bloc-texte > ul:first-of-type ~ * { order: 3; }
    .pcn-bloc-media-sous-titre > .pcn-bloc-texte > .pcn-sur-titre { align-self: flex-start; }
    .pcn-bloc-media-sous-titre > :not(.pcn-bloc-texte) { order: 2; margin-bottom: 24px; }
    /* Seul le premier média remonte : les suivants (ex : carrousel du plan sous la vidéo du bloc 4) restent
       après le texte, à leur place habituelle sur une colonne. */
    .pcn-bloc-media-sous-titre > :not(.pcn-bloc-texte) ~ :not(.pcn-bloc-texte) { order: 4; margin-bottom: 0; }
}
@media (max-width: 720px) {
    .pcn { font-size: 17px; }
    .pcn-profils { grid-template-columns: minmax(0, 1fr); }
    .pcn-barre-mobile { display: flex; }
    /* Place réservée sous le pied de page pour que la barre d'abonnement collante, seule à s'afficher ici, ne
       recouvre pas la dernière ligne de liens une fois la page défilée jusqu'en bas. */
    .pcn-bloc-texte > p, .pcn-entete-section p { font-size: 17px; }
    .pcn-bandeau-photos { gap: 3px; }
}
@media (max-width: 520px) {
    .pcn-grille-fonctions { grid-template-columns: minmax(0, 1fr); }
    .pcn-fonction { font-size: 18px; padding: 14px 16px; }
    .pcn-fonction-icone { width: 46px; height: 46px; font-size: 24px; }
    .pcn-hero-actions .pcn-bouton { width: 100%; }
    .pcn-profil-avatar { width: 72px; height: 72px; }
    .pcn-nuage-2 { display: none; }
}