/* ==========================================================================
   Fabienne Bonneau — Psychologue
   Feuille de style unique du site
   --------------------------------------------------------------------------
   SOMMAIRE
   1.  Variables de thème
   2.  Réinitialisation et bases
   3.  Typographie
   4.  Accessibilité (focus)
   5.  En-tête et navigation
   6.  Structure des sections (et cubes décoratifs de l'accueil)
   7.  Médias (portraits, carte)
   8.  Liens de contact et bouton
   9.  Animations d'apparition
   10. Pied de page
   11. Adaptation aux écrans
   12. Impression
   ========================================================================== */


/* ==========================================================================
   1. Variables de thème
   --------------------------------------------------------------------------
   Toutes les couleurs et dimensions réglables du site sont réunies ici.
   ========================================================================== */

:root {
    /* --- Palette --- */
    --color-cream: #fbfaf4;
    --color-green: #7ba590;      /* le vert du site, fond des sections */
    --color-green-deep: #4e7a64; /* même vert en plus profond : bandeaux et
                                    bouton, où du texte clair doit rester
                                    lisible */
    --color-pink: #f8b6c2;
    --color-text: #272727;

    /* --- Couleurs des cubes décoratifs de l'accueil ---
       Teintes relevées directement sur le logo : ce sont celles des quatre
       aplats de l'ancienne version du site, plus le bleu pâle du centre. */
    --cube-vert: #7ba590;
    --cube-jaune: #e1c876;
    --cube-mauve: #cab5ba;
    --cube-terracotta: #d28d8d;
    --cube-bleu: #cfdee9;
    --cube-creme: #fbfaf4; /* pour les sections à fond vert */

    /* Trois tailles de cube, exprimées en part du couloir disponible : elles
       grandissent donc avec l'écran. Les bornes évitent l'invisible sur
       téléphone et le disgracieux sur très grand écran. */
    --cube-p: clamp( 7px, calc(var(--couloir) * 0.22), 20px);
    --cube-m: clamp( 9px, calc(var(--couloir) * 0.30), 28px);
    --cube-g: clamp(11px, calc(var(--couloir) * 0.40), 38px);

    /* Deux profondeurs dans le couloir : contre le bord, ou bien en retrait.
       La plus profonde plus le plus gros cube font 78 % du couloir : il
       reste toujours de la marge avant le texte, à n'importe quelle
       largeur d'écran. */
    --bord-1: clamp(4px, calc(var(--couloir) * 0.10),  60px);
    --bord-2: clamp(9px, calc(var(--couloir) * 0.38), 150px);

    /* Anciens noms, conservés au cas où ils seraient utilisés ailleurs */
    --primary-color: var(--color-cream);
    --secondary-color: var(--color-green);
    --pink-color: var(--color-pink);

    /* --- Typographie ---
       Georgia pour les titres : un serif élégant, présent sur tous les
       ordinateurs, qui fait écho au logo. Aucune police à télécharger, donc
       aucun ralentissement au chargement. */
    --font-title: Georgia, "Iowan Old Style", "Times New Roman", serif;
    --font-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

    /* --- Rythme et dimensions ---
       clamp(mini, souhaité, maxi) : la valeur grandit progressivement avec la
       largeur de l'écran, sans à-coup d'un palier à l'autre. */
    /* Le retrait horizontal des sections sert aussi de couloir aux cubes :
       le contenu ne va jamais dedans, quelle que soit la largeur. */
    --retrait-h: clamp(30px, 5vw, 60px);
    --space-section: clamp(60px, 9vh, 110px) var(--retrait-h);

    /* Largeur maximale de la colonne de contenu */
    --contenu-max: 1180px;

    /* Place réellement libre de chaque côté du contenu.
       Sur un grand écran, la colonne est bloquée à --contenu-max : tout le
       reste est disponible, bien au-delà du simple retrait. Les 20 px retirés
       couvrent la largeur de la barre de défilement, que 100vw inclut. */
    --couloir: max(var(--retrait-h), (100vw - var(--contenu-max)) / 2 - 20px);
    --gap-content: clamp(32px, 6vw, 90px);
    --text-width: 480px;
    --media-size: clamp(260px, 38vw, 500px);

    /* Couleur du contour des médias ; redéfinie par chaque section (voir §6) */
    --ring-color: var(--color-green);

    /* --- Ombres ---
       Des ombres portées douces et très diffuses, plutôt que le halo net
       d'autrefois : c'est ce qui donne de la profondeur sans durcir l'image. */
    --shadow-media: 0 18px 40px rgba(39, 39, 39, 0.16);
    --shadow-media-hover: 0 26px 56px rgba(39, 39, 39, 0.22);
    --shadow-bar: 0 1px 24px rgba(39, 39, 39, 0.12);
    --shadow-button: 0 6px 18px rgba(39, 39, 39, 0.18);

    /* Courbe d'accélération commune : départ vif, arrivée en douceur */
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   2. Réinitialisation et bases
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Empêche l'en-tête fixe de recouvrir le titre d'une section ciblée */
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    line-height: 1.7;
    color: var(--color-text);
    background-color: var(--color-cream);
    /* Lisse le rendu des caractères sur écran Apple */
    -webkit-font-smoothing: antialiased;
}

img,
iframe {
    display: block;
    max-width: 100%;
}

/* Surlignage du texte à la souris, aux couleurs du site */
::selection {
    background-color: var(--color-pink);
    color: var(--color-text);
}


/* ==========================================================================
   3. Typographie
   ========================================================================== */

h1,
h2,
h3 {
    font-family: var(--font-title);
    font-weight: normal;
    /* Resserre légèrement les grands titres : plus net à l'œil */
    letter-spacing: -0.015em;
}

h1 {
    margin: 0;
    font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.45rem);
    letter-spacing: 0.01em;
}

h2 {
    margin: 0 0 0.7em;
    font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.9rem);
    line-height: 1.15;
}

h3 {
    margin: 0 0 0.5em;
    font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem);
}

/* Les <strong> des titres venaient de l'ancienne page : ils ne doivent plus
   alourdir un titre déjà mis en valeur par sa police. */
h3 strong {
    font-weight: normal;
}

p {
    margin: 0 0 1.1em;
}

/* Citation du code de déontologie */
i {
    display: block;
    margin: 0 0 1.3em;
    padding-left: 1.1em;
    border-left: 2px solid currentColor;
    opacity: 0.85;
}

/* Précision secondaire sous un intitulé de service */
.note {
    margin: -0.3em 0 1.2em;
    font-size: 0.94em;
    opacity: 0.88;
}

/* Espace avant le second intitulé de la section « Mes services » */
.service-group {
    margin-top: 2em;
}


/* ==========================================================================
   4. Accessibilité
   ========================================================================== */

/* Indicateur de focus homogène sur tout le site : encadre le lien ou le
   bouton atteint à la touche Tab. N'apparaît jamais à la souris. */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--color-pink);
    outline-offset: 3px;
    border-radius: 2px;
}


/* ==========================================================================
   5. En-tête et navigation
   ========================================================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 16px clamp(20px, 5vw, 60px);
    background-color: var(--color-green-deep);
    color: var(--color-cream);
    box-shadow: var(--shadow-bar);
}

/* --- Bouton burger --------------------------------------------------------
   L'état ouvert/fermé est porté par l'attribut aria-expanded : une seule
   source de vérité pour le style et pour les lecteurs d'écran.
   ------------------------------------------------------------------------- */

.burger-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: none;
    width: 28px;
    height: 18px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.burger-menu .line {
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-cream);
    transition: transform 0.35s var(--ease-soft), opacity 0.2s ease;
}

.burger-menu[aria-expanded="true"] .line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.burger-menu[aria-expanded="true"] .line:nth-child(2) {
    opacity: 0;
}

.burger-menu[aria-expanded="true"] .line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- Menu ----------------------------------------------------------------
   Petit écran : panneau qui se déplie sous le bouton.
   Grand écran : les liens s'alignent dans le bandeau (voir §11).
   ------------------------------------------------------------------------- */

.nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: clamp(20px, 5vw, 60px);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 22px 26px;
    list-style: none;
    background-color: var(--color-green-deep);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(39, 39, 39, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px) scale(0.98);
    transform-origin: top right;
    transition: opacity 0.3s var(--ease-soft),
                transform 0.3s var(--ease-soft),
                visibility 0.3s;
}

.nav-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.nav-menu a {
    position: relative;
    color: var(--color-cream);
    text-decoration: none;
    white-space: nowrap;
}

/* Soulignement qui se déploie depuis la gauche au survol */
.nav-menu a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--ease-soft);
}

.nav-menu a:hover::after,
.nav-menu a:focus-visible::after {
    transform: scaleX(1);
}


/* ==========================================================================
   6. Structure des sections
   --------------------------------------------------------------------------
   Chaque section alterne entre fond crème et fond vert. La variable
   --ring-color est redéfinie par le fond, ce qui évite de répéter les règles
   de contour pour chaque section.
   ========================================================================== */

.section {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: var(--space-section);
}

.section--cream {
    background-color: var(--color-cream);
    --ring-color: var(--color-green);
}

.section--green {
    background-color: var(--color-green);
    --ring-color: var(--color-cream);
}

.section__inner {
    position: relative;
    z-index: 1; /* passe devant les cubes décoratifs */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-content);
    width: 100%;
    max-width: var(--contenu-max);
    margin: auto;
}

/* Inverse l'ordre affiché sans modifier l'ordre de lecture du contenu */
.section__inner--reverse {
    flex-direction: row-reverse;
}

.section__text {
    max-width: var(--text-width);
    color: var(--color-text);
}

/* Grand titre de la section d'accueil */
.section--hero h2 {
    margin: 0;
    font-size: clamp(3.4rem, 10.5vw, 8rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--color-green);
}


/* --- Cubes décoratifs -----------------------------------------------------
   De petits carrés aux couleurs du logo, semés dans chaque section : cinq
   dans l'accueil, quatre dans les quatre autres. Ils sont dessinés en CSS,
   donc aucune image à télécharger.
   Chacun reçoit sa teinte, sa taille, sa place, son inclinaison et son rythme
   par des variables : la liste du bas se lit alors comme un tableau.
   Ils flottent lentement et restent derrière le contenu.

   PLACEMENT — chaque cube se cale dans la marge gauche ou droite de la
   section, jamais en pourcentage de sa largeur. Cette marge, c'est --couloir
   (voir §1) : le retrait des sections sur écran étroit, et tout l'espace
   laissé libre par la colonne de contenu sur écran large. Le contenu n'y
   entre jamais, donc un cube ne peut pas chevaucher le texte.
   Tailles et profondeurs sont des parts de ce couloir : les cubes grossissent
   sur grand écran et se resserrent sur téléphone, sans jamais en sortir.

   Sur fond vert, le cube vert serait invisible : ces sections utilisent le
   crème à la place.
   ------------------------------------------------------------------------- */

.cubes {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;    /* aucun cube ne peut déborder de la page */
    pointer-events: none; /* ne gêne jamais un clic */
}

.cube {
    position: absolute;
    top: var(--y);
    /* Un cube renseigne --gauche OU --droite, jamais les deux */
    left: var(--gauche, auto);
    right: var(--droite, auto);
    width: var(--taille);
    height: var(--taille);
    border-radius: 3px;
    background-color: var(--teinte);
    opacity: 0;
    animation: cube-apparait 1.4s var(--retard) ease-out forwards,
               cube-flotte var(--duree) var(--retard) ease-in-out infinite;
}

@keyframes cube-apparait {
    to { opacity: 1; }
}

@keyframes cube-flotte {
    0%, 100% { transform: translateY(0) rotate(var(--angle)); }
    50%      { transform: translateY(-13px) rotate(calc(var(--angle) + 5deg)); }
}

/* Teinte · taille · marge et profondeur · hauteur · inclinaison · rythme */

/* Accueil (fond crème) */
.cube--acc-1 { --teinte: var(--cube-vert);       --taille: var(--cube-g); --gauche: var(--bord-2); --y: 14%; --angle:  -8deg; --duree:  9s;   --retard: 0.10s; }
.cube--acc-2 { --teinte: var(--cube-mauve);      --taille: var(--cube-m); --droite: var(--bord-1); --y:  9%; --angle:   6deg; --duree: 10s;   --retard: 0.30s; }
.cube--acc-3 { --teinte: var(--cube-terracotta); --taille: var(--cube-g); --droite: var(--bord-2); --y: 38%; --angle:  -5deg; --duree:  8.5s; --retard: 0.50s; }
.cube--acc-4 { --teinte: var(--cube-jaune);      --taille: var(--cube-p); --gauche: var(--bord-1); --y: 64%; --angle:   9deg; --duree: 11s;   --retard: 0.65s; }
.cube--acc-5 { --teinte: var(--cube-bleu);       --taille: var(--cube-m); --droite: var(--bord-1); --y: 84%; --angle:  -7deg; --duree:  9.5s; --retard: 0.20s; }

/* Mon approche (fond vert) */
.cube--app-1 { --teinte: var(--cube-jaune);      --taille: var(--cube-m); --gauche: var(--bord-1); --y: 16%; --angle:  -9deg; --duree:  9.5s; --retard: 0.15s; }
.cube--app-2 { --teinte: var(--cube-creme);      --taille: var(--cube-p); --droite: var(--bord-2); --y: 28%; --angle:   8deg; --duree:  8s;   --retard: 0.45s; }
.cube--app-3 { --teinte: var(--cube-terracotta); --taille: var(--cube-g); --gauche: var(--bord-2); --y: 70%; --angle:   5deg; --duree: 10.5s; --retard: 0.30s; }
.cube--app-4 { --teinte: var(--cube-bleu);       --taille: var(--cube-m); --droite: var(--bord-1); --y: 85%; --angle:  -6deg; --duree:  9s;   --retard: 0.60s; }

/* Mes services (fond crème) */
.cube--ser-1 { --teinte: var(--cube-mauve);      --taille: var(--cube-m); --droite: var(--bord-1); --y: 12%; --angle:  -6deg; --duree: 10s;   --retard: 0.20s; }
.cube--ser-2 { --teinte: var(--cube-jaune);      --taille: var(--cube-p); --gauche: var(--bord-2); --y: 30%; --angle:  10deg; --duree:  8.5s; --retard: 0.50s; }
.cube--ser-3 { --teinte: var(--cube-vert);       --taille: var(--cube-m); --droite: var(--bord-2); --y: 60%; --angle:   7deg; --duree:  9s;   --retard: 0.35s; }
.cube--ser-4 { --teinte: var(--cube-terracotta); --taille: var(--cube-g); --gauche: var(--bord-1); --y: 86%; --angle:  -9deg; --duree: 11s;   --retard: 0.10s; }

/* Qui suis-je (fond vert) */
.cube--qui-1 { --teinte: var(--cube-bleu);       --taille: var(--cube-m); --gauche: var(--bord-1); --y: 18%; --angle:   8deg; --duree:  9s;   --retard: 0.25s; }
.cube--qui-2 { --teinte: var(--cube-jaune);      --taille: var(--cube-p); --droite: var(--bord-2); --y: 10%; --angle: -10deg; --duree: 10.5s; --retard: 0.55s; }
.cube--qui-3 { --teinte: var(--cube-creme);      --taille: var(--cube-g); --droite: var(--bord-1); --y: 68%; --angle:   5deg; --duree:  8s;   --retard: 0.15s; }
.cube--qui-4 { --teinte: var(--cube-mauve);      --taille: var(--cube-m); --gauche: var(--bord-2); --y: 82%; --angle:  -7deg; --duree:  9.5s; --retard: 0.40s; }

/* Me contacter (fond crème) */
.cube--con-1 { --teinte: var(--cube-terracotta); --taille: var(--cube-m); --gauche: var(--bord-2); --y: 14%; --angle:  -8deg; --duree: 10s;   --retard: 0.20s; }
.cube--con-2 { --teinte: var(--cube-vert);       --taille: var(--cube-p); --droite: var(--bord-1); --y: 24%; --angle:   6deg; --duree:  8.5s; --retard: 0.50s; }
.cube--con-3 { --teinte: var(--cube-jaune);      --taille: var(--cube-g); --gauche: var(--bord-1); --y: 74%; --angle:  10deg; --duree:  9s;   --retard: 0.30s; }
.cube--con-4 { --teinte: var(--cube-mauve);      --taille: var(--cube-m); --droite: var(--bord-2); --y: 88%; --angle:  -5deg; --duree: 11s;   --retard: 0.60s; }


/* ==========================================================================
   7. Médias (portraits, carte)
   ========================================================================== */

/* Contour fin et ombre portée douce ; la couleur du contour vient de la
   section parente. */
.portrait,
.map {
    flex: none;
    width: var(--media-size);
    height: var(--media-size);
    padding: 9px;
    border: 2px solid var(--ring-color);
    box-shadow: var(--shadow-media);
    object-fit: cover;
    /* Les dimensions ci-dessus portent sur le contenu, contour exclu. */
    box-sizing: content-box;
    /* La transition de ces éléments est déclarée une seule fois en §9, avec
       celle de l'apparition : ils portent tous la classe « fade-in ». */
}

.portrait {
    border-radius: 50%;
}

.map {
    margin: auto;
    border-radius: 18px;
}

/* Léger soulèvement au survol */
.portrait:hover,
.map:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-media-hover);
}

/* Conteneur <picture> : il ne doit pas perturber la mise en page flex */
.media {
    display: contents;
}


/* ==========================================================================
   8. Liens de contact et bouton
   ========================================================================== */

.section__text a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity 0.25s ease;
}

.section__text a:hover,
.section__text a:focus {
    opacity: 0.7;
}

/* --- Bouton de prise de rendez-vous --------------------------------------
   Vert profond et texte clair : il tranche sur le fond crème de la section
   et se repère immédiatement.
   ------------------------------------------------------------------------- */

.section__text a.button {
    display: inline-block;
    margin-top: 0.8em;
    padding: 15px 34px;
    border: 0;
    border-radius: 999px;
    background-color: var(--color-green-deep);
    color: var(--color-cream);
    box-shadow: var(--shadow-button);
    font-family: var(--font-base);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    transition: transform 0.35s var(--ease-soft),
                box-shadow 0.35s var(--ease-soft),
                background-color 0.35s ease;
}

.section__text a.button:hover,
.section__text a.button:focus {
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: var(--shadow-media-hover);
    background-color: #3f6753;
}


/* ==========================================================================
   9. Animations d'apparition
   --------------------------------------------------------------------------
   Le JavaScript ajoute la classe « visible » (voir assets/js/main.js) et
   décale légèrement les éléments d'un même bloc, pour que le contenu se
   dépose au lieu d'apparaître d'un coup.
   Sans JavaScript, la balise <noscript> de la page rétablit la visibilité.
   ========================================================================== */

.fade-in {
    opacity: 0;
    transform: translateY(22px);
    /* Sert deux usages : l'apparition au défilement, et le soulèvement des
       photos au survol (§7). */
    transition: opacity 0.9s var(--ease-soft),
                transform 0.7s var(--ease-soft),
                box-shadow 0.5s var(--ease-soft);
}

.fade-in.visible {
    opacity: 1;
    transform: none;
}

/* Respect du réglage système « réduire les animations » */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .fade-in,
    .nav-menu,
    .burger-menu .line,
    .portrait,
    .map,
    .section__text a.button {
        transition: none;
    }

    .fade-in {
        opacity: 1;
        transform: none;
    }

    .portrait:hover,
    .map:hover,
    .section__text a.button:hover {
        transform: none;
    }

    /* Les cubes restent en place, simplement visibles */
    .cube {
        opacity: 1;
        animation: none;
    }
}


/* ==========================================================================
   10. Pied de page
   ========================================================================== */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 28px clamp(20px, 5vw, 60px);
    background-color: var(--color-green-deep);
    color: var(--color-cream);
    font-size: 0.92rem;
    letter-spacing: 0.02em;
}

.site-footer p {
    margin: 0;
    opacity: 0.9;
}


/* ==========================================================================
   11. Adaptation aux écrans
   ========================================================================== */

/* Grand écran : les liens s'affichent dans le bandeau, le burger disparaît */
@media screen and (min-width: 900px) {
    .burger-menu {
        display: none;
    }

    .nav-menu {
        position: static;
        flex-direction: row;
        gap: clamp(20px, 2.6vw, 38px);
        padding: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

/* Tablette et en dessous : image et texte s'empilent */
@media screen and (max-width: 1024px) {
    .section {
        min-height: 0;
    }

    .section__inner,
    .section__inner--reverse {
        flex-direction: column;
    }

    .section__text {
        max-width: 560px;
    }
}

/* Mobile */
@media screen and (max-width: 700px) {
    :root {
        /* Le média occupe presque toute la largeur, sans jamais déborder */
        --media-size: min(300px, 74vw);
    }

    .section__text a.button {
        display: block;
    }

}


/* ==========================================================================
   12. Impression
   ========================================================================== */

@media print {
    .site-header,
    .nav-menu,
    .map,
    .cubes,
    .section__text a.button {
        display: none;
    }

    .section {
        min-height: 0;
        padding: 0 0 1.5cm;
        background: #fff;
    }

    .fade-in {
        opacity: 1;
        transform: none;
    }
}