*/ position: relative; /* Contexte d’empilement */ z-index: 2; /* Au-dessus du voile */ } /* --- Liens : limités à la page FAQ pour ne pas impacter le reste du site --- */ .faq-page-body a{ /* Liens dans la FAQ uniquement */ color: var(--ink, #2e2e2e); /* Couleur lisible */ } .faq-page-body a:hover{ /* Survol liens */ text-decoration: underline; /* Feedback simple */ } /* ============================================================================= GRAND CHAPITRE 2 — CONTENEUR PRINCIPAL FAQ (LISIBILITÉ + RESPIRATION) ============================================================================= */ .faq-page{ /* Conteneur principal */ max-width: 920px; /* Largeur de lecture confortable */ margin: 0 auto; /* Centre horizontalement */ padding: 56px 18px 72px; /* Respiration haut / côtés / bas */ } @media (max-width: 700px){ /* Breakpoint mobile */ .faq-page{ /* Conteneur principal sur mobile */ padding: 34px 14px 54px; /* Padding réduit */ } } /* ============================================================================= GRAND CHAPITRE 3 — EN-TÊTE DE PAGE (H1 + INTRO) ============================================================================= */ .faq-header{ /* Zone titre (sans “cartouche” si vous l’avez retiré en HTML) */ margin-bottom: 26px; /* Espace avant FAQ */ } .faq-header h1{ /* Titre principal (SEO) */ font-size: clamp(1.8rem, 3.6vw, 2.0rem); /* Responsive */ line-height: 1.15; /* Confort */ margin: 0 0 10px 0; /* Espace sous titre */ font-weight: 700; /* Impact visuel */ color: #2e2e2e; /* Texte blanc sur fond image */ text-shadow: 5px 5px 18px rgba(255,255,255,.45); /* Lisibilité sur photo */ letter-spacing: -0.01em; /* Style moderne */ } .faq-intro{ /* Paragraphe d’intro */ margin: 0; /* Reset */ font-size: 1.05rem; /* Lisible */ line-height: 1.55; /* Respirant */ color: rgba(46,46,46,.92); /* Blanc doux */ text-shadow: 0 10px 24px rgba(0,0,0,.35); /* Lisibilité */ max-width: 78ch; /* Longueur idéale */ } @media (max-width: 700px){ /* Mobile */ .faq-header h1{ /* Titre mobile */ text-shadow: 0 10px 24px rgba(0,0,0,.48); /* Un poil plus marqué */ } } /* ============================================================================= GRAND CHAPITRE 4 — TITRES DE SECTION (H2) ============================================================================= */ .faq-section{ /* Conteneur section */ background: transparent; /* Pas de fond */ } .faq-section h2{ /* Titre de section */ font-size: 1.35rem; /* Hiérarchie */ margin: 0 0 14px 0; /* Espace sous titre */ color: rgba(255,255,255,.92); /* Blanc doux (sur image) */ font-weight: 500; /* Marqué sans être agressif */ text-shadow: 0 10px 24px rgba(255,255,255,.40); /* Lisibilité */ letter-spacing: -0.005em; /* Moderne */ } /* ============================================================================= GRAND CHAPITRE 5 — ITEMS FAQ (DETAILS) : CARTES ============================================================================= */ .faq-item{ /* Carte FAQ */ border: 1px solid var(--border, #e6e6e6); /* Bordure */ border-radius: 14px; } /* Arrondis */ .faq-item{ background: rgba(255,255,255,.55); /* Carte “module” qui ressort du fond */ box-shadow: 0 8px 18px rgba(255,255,255,.05); /* Ombre douce */ margin: 0 0 14px 0; /* Espacement */ overflow: hidden; /* Coupe débordements */ backdrop-filter: blur(4px); /* Effet “verre” léger (supporté sur modern browsers) */ } .faq-item[open]{ /* Carte ouverte */ border-color: #d7d7d7; /* Bordure plus présente */ box-shadow: 0 12px 26px rgba(0,0,0,.07); /* Ombre renforcée */ background: #ffffff; /* Léger changement de fond */ } /* ============================================================================= GRAND CHAPITRE 6 — QUESTIONS (SUMMARY) ============================================================================= */ .faq-item summary{ /* Zone cliquable */ cursor: pointer; /* Curseur interaction */ list-style: none; /* Supprime marker */ padding: 18px 18px; /* Confort */ display: block; /* Pleine largeur */ } .faq-item summary::-webkit-details-marker{ /* Marker WebKit */ display: none; /* Masque triangle */ } .faq-item summary:focus{ /* Focus ancien */ outline: none; /* Reset */ } .faq-item summary:focus-visible{ /* Focus clavier */ box-shadow: 0 0 0 3px rgba(0,0,0,.10); /* Halo discret */ border-radius: 12px; /* Arrondis */ } .faq-item summary h3{ /* Texte question */ margin: 0; /* Reset */ font-size: 1.06rem; /* Taille */ line-height: 1.35; /* Lisible */ font-weight: 550; /* Marqué */ color: var(--ink, #2e2e2e); /* Couleur */ position: relative; /* Ancre icône */ padding-right: 34px; /* Place pour icône */ } .faq-item summary h3::after{ /* Icône fermé */ content: "+"; /* Symbole */ position: absolute; /* Positionnement */ right: 0; /* Aligné à droite */ top: 0; /* Aligné en haut */ font-size: 1.25rem; /* Taille */ line-height: 1; /* Compact */ opacity: .65; /* Discret */ } .faq-item[open] summary h3::after{ /* Icône ouvert */ content: "–"; /* Symbole */ opacity: .75; /* Légèrement plus visible */ } /* ============================================================================= GRAND CHAPITRE 7 — RÉPONSES ============================================================================= */ .faq-answer{ /* Bloc réponse */ padding: 0 18px 18px 18px; /* Respiration */ } .faq-answer::before{ /* Séparateur */ content: ""; /* Élément généré */ display: block; /* Bloc */ height: 1px; /* Trait fin */ background: #f0f0f0; /* Couleur douce */ margin: 0 0 14px 0; /* Espace sous trait */ } .faq-answer p{ /* Texte réponse */ margin: 0; /* Reset */ font-size: 1rem; /* Taille standard */ line-height: 1.65; /* Confort lecture */ color: var(--muted, #2e2e2e); /* Couleur secondaire */ } /* ============================================================================= GRAND CHAPITRE 8 — MICRO-ANIMATIONS + PREFERS-REDUCED-MOTION ============================================================================= */ .faq-item{ /* Carte (transition) */ transition: box-shadow .18s ease, /* Transition ombre */ border-color .18s ease, /* Transition bordure */ background .18s ease, /* Transition fond */ transform .18s ease; /* Transition déplacement léger */ } /* Survol “simple mais classe” : micro lift + ombre */ @media (hover:hover){ /* N’applique l’effet que si survol souris possible */ .faq-item:hover{ /* Survol carte */ transform: translateY(-2px); /* Léger “lift” */ box-shadow: 0 14px 32px rgba(0,0,0,.10); /* Ombre un peu plus présente */ } } @media (prefers-reduced-motion: reduce){ /* Respect accessibilité */ .faq-item{ /* Carte */ transition: none; /* Désactive transitions */ } .faq-item:hover{ /* Survol */ transform: none; /* Pas de mouvement */ } } /* ============================================================================= GRAND CHAPITRE 9 — RESPONSIVE (AJUSTEMENTS MOBILE) ============================================================================= */ @media (max-width: 700px){ /* Mobile */ .faq-item summary{ /* Zone question */ padding: 16px 14px; /* Padding réduit */ } .faq-answer{ /* Bloc réponse */ padding: 0 14px 16px 14px; /* Padding réduit */ } .faq-item summary h3{ /* Texte question */ font-size: 1.02rem; /* Légère réduction */ padding-right: 30px; /* Place pour icône */ } } /* ============================================================================= GRAND CHAPITRE 10 — ROTATION DU FOND (FADE, 10s) — SOLUTION “CAHIER DES CHARGES” Principe : - Sans JS : ::before + ::after assurent un fond + un voile (déjà en place) - Avec JS : on ajoute la classe .has-rotator sur et on utilise :

- SEO/UX : le contenu reste visible même si JS ne tourne pas ============================================================================= */ /* Quand le rotator est actif, on coupe les pseudo-éléments fallback (évite double fond/voile) */ .faq-page-body.has-rotator::before{ /* Fond fallback */ display: none; /* Désactive la couche fallback */ } .faq-page-body.has-rotator::after{ /* Voile fallback */ display: none; /* Désactive le voile fallback */ } /* Couches fond (2 div) pour faire un vrai fade propre */ .faq-bg-layer{ /* Cible :

*/ position: fixed; /* Fond fixe pendant le scroll */ inset: 0; /* Couvre tout l’écran */ background-size: cover; /* Remplit en recadrant */ background-position: center; /* Centre l’image */ background-repeat: no-repeat; /* Pas de répétition */ filter: saturate(0.98) contrast(0.98); /* Calme légèrement l’image */ transform: translateZ(0); /* Stabilise le rendu */ opacity: 0; /* Invisible par défaut */ transition: opacity 1.2s ease; /* ✅ Fade (durée maîtrisée) */ z-index: 0; /* Sous voile, sous contenu */ } /* La couche visible à l’instant T */ .faq-bg-layer.is-visible{ /* Classe togglée par JS */ opacity: 1; /* Rend visible */ } /* Voile (div séparée) : réglable indépendamment de l’image */ .faq-veil{ /* Cible :

*/ position: fixed; /* Fixe */ inset: 0; /* Plein écran */ background: rgba(255,255,255,.05); /* Voile plus léger (moins “grisé”) */ z-index: 1; /* Au-dessus du fond, sous contenu */ } /* Accessibilité : si motion reduce, on supprime le fade */ @media (prefers-reduced-motion: reduce){ /* Préférence utilisateur */ .faq-bg-layer{ /* Couches fond */ transition: none; /* Pas d’animation */ } } /* Footer au-dessus du voile (sinon il peut “disparaître” visuellement) */ .faq-page-body .site-footer{ /* Footer dans page FAQ */ position: relative; /* Crée un contexte z-index */ z-index: 2; /* Au-dessus du voile */ }