/* Theme Name: Pavillon Theme URI: https://permis-bateau.org Author: Permis Bateau Description: Thème code-pur pour permis-bateau.org — le pavillon P est hissé, on part. Pavillons du code international, feux de route, numéros de coque, coupe d'étrave. Écrit de zéro pour ce site (DIRECTION-ARTISTIQUE.md, 28/09/2026). Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 Text Domain: pavillon */ /* ========================================================================= 0. TOKENS — mode CLAIR uniquement (P-030 du parc). Aucune media prefers-color-scheme dark : décision de direction artistique du site. ========================================================================= */ :root{ --voile:#FBFBF8; --rade:#E4EDF6; --nuit:#0B1E33; --pavillon:#0B45C2; --jaune-q:#FFC20E; --coque:#566479; --tribord:#0A7A45; --babord:#C81E2E; --blanc:#FFFFFF; --police-titre:"Alumni Sans", "Arial Narrow", sans-serif; --police-corps:"Source Sans 3", "Segoe UI", sans-serif; --conteneur:1240px; --gouttiere:24px; --rayon:0; /* rayon 0 partout : décision DA, la coupe d'étrave remplace l'arrondi */ --etrave:4deg; --ombre-dure:6px 6px 0 rgba(11,30,51,.22); --ombre-carte:0 10px 24px rgba(11,30,51,.12); } @media (max-width:640px){ :root{ --gouttiere:16px; } } /* ========================================================================= 1. RESET SOBRE ========================================================================= */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--voile); color:var(--nuit); font-family:var(--police-corps); font-size:18px; line-height:1.65; overflow-x:hidden; } img,svg{ max-width:100%; height:auto; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; } ul[class],ol[class]{ list-style:none; margin:0; padding:0; } /* Point 5 (constat homepage) : un [hidden] doit rester caché quoi qu'une règle de classe dise plus loin dans la feuille — ceinture et bretelles. */ [hidden]{ display:none !important; } h1,h2,h3,h4{ font-family:var(--police-titre); font-style:italic; font-weight:800; text-transform:uppercase; letter-spacing:-0.01em; line-height:0.95; margin:0 0 .5em; color:var(--nuit); } p{ margin:0 0 1.1em; } :focus-visible{ outline:3px solid var(--pavillon); outline-offset:2px; } .pv-conteneur{ max-width:var(--conteneur); margin-inline:auto; padding-inline:var(--gouttiere); } .pv-visually-hidden{ position:absolute !important; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; } .pv-sr-skip{ position:absolute; left:-999px; top:0; background:var(--nuit); color:#fff; padding:.6em 1em; z-index:200; } .pv-sr-skip:focus{ left:var(--gouttiere); top:var(--gouttiere); } /* ========================================================================= 2. COUPE D'ÉTRAVE — procédé signature n°5 ========================================================================= */ .pv-etrave-bas{ clip-path:polygon(0 0,100% 0,100% calc(100% - 2.4vw),0 100%); } .pv-etrave-haut{ clip-path:polygon(0 2.4vw,100% 0,100% 100%,0 100%); } .pv-carte-image{ clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%); } /* ========================================================================= 3. BOUTONS — parallélogramme penché vers l'avant ========================================================================= */ .pv-bouton{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1rem; letter-spacing:-0.005em; padding:.85em 1.6em .75em 1.9em; background:var(--jaune-q); color:var(--nuit); clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%); border:none; cursor:pointer; min-height:44px; transition:transform .15s ease, background .15s ease; } .pv-bouton:hover,.pv-bouton:focus-visible{ transform:translateX(2px); background:#FFCF3D; } .pv-bouton--fonce{ background:var(--nuit); color:#fff; } .pv-bouton--fonce:hover{ background:#132a48; } .pv-bouton--contour{ background:transparent; color:var(--voile); border:2px solid var(--voile); padding:.75em 1.5em .65em 1.8em; } .pv-bouton--attente{ background:var(--rade); color:var(--coque); cursor:not-allowed; } .pv-bouton--attente em{ font-style:italic; font-weight:400; font-size:.8em; } .pv-bouton--petit{ padding:.55em 1.1em .5em 1.3em; font-size:.85rem; } /* ========================================================================= 4. BULLETIN — barre haute défilante (procédé signature n°7) ========================================================================= */ .pv-bulletin{ background:var(--nuit); color:var(--voile); font-family:var(--police-corps); font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; display:flex; align-items:center; gap:1rem; padding-block:.5em; } .pv-bulletin_porte-voix{ flex:0 0 auto; margin-left:var(--gouttiere); color:var(--jaune-q); } .pv-bulletin_piste{ flex:1 1 auto; overflow:hidden; } .pv-bulletin_defile{ display:flex; gap:3rem; white-space:nowrap; animation:pv-defile 32s linear infinite; } .pv-bulletin_piste:hover .pv-bulletin_defile{ animation-play-state:paused; } .pv-bulletin_compteur{ flex:0 0 auto; margin-right:var(--gouttiere); color:var(--jaune-q); font-variant-numeric:tabular-nums; } @keyframes pv-defile{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} } @media (prefers-reduced-motion:reduce){ .pv-bulletin_defile{ animation:none; flex-wrap:wrap; } } /* ========================================================================= 5. HEADER ========================================================================= */ .pv-entete{ position:sticky; top:0; z-index:100; background:var(--voile); border-bottom:1px solid var(--rade); } .pv-entete_barre{ display:flex; align-items:center; gap:1.5rem; padding-block:.9em; } .pv-marque{ display:flex; align-items:center; gap:.55em; flex:0 0 auto; } .pv-marque_symbole{ width:34px; height:23px; flex:0 0 auto; } .pv-marque_texte{ font-family:var(--police-titre); font-style:italic; font-weight:800; text-transform:uppercase; font-size:1.35rem; letter-spacing:-.01em; white-space:nowrap; } .pv-marque_domaine{ font-family:var(--police-corps); font-style:normal; font-weight:600; color:var(--coque); font-size:.62em; text-transform:none; margin-left:.15em; } .pv-nav{ display:flex; align-items:center; gap:1.2rem; flex:1 1 auto; } .pv-nav_liste{ display:flex; flex-wrap:nowrap; align-items:center; gap:1rem; } /* Point 1 (D3, 28/09) — .98rem (15,68px) lisait trop petit sur capture (police condensée italique capitales) : porté à 1.1rem (~17,6px, proche des 19px DA), gaps resserrés pour ne pas redéborder à 1440 (≤6 entrées déjà, marge suffisante dans le conteneur 1240px). */ .pv-nav_lien{ font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1.1rem; letter-spacing:-.005em; white-space:nowrap; padding:.3em 0; border-bottom:2px solid transparent; } .pv-nav_lien:hover,.pv-nav_lien.is-actif{ border-color:var(--jaune-q); } .pv-nav_panneau-bouton{ font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1.1rem; background:none; border:none; color:var(--nuit); display:flex; align-items:center; gap:.3em; cursor:pointer; padding:.3em 0; } .pv-nav_panneau-bouton svg{ transition:transform .18s ease; } .pv-nav_panneau-bouton[aria-expanded="true"] svg{ transform:rotate(180deg); } .pv-nav_panneau{ position:absolute; left:0; right:0; top:100%; background:var(--voile); border-bottom:1px solid var(--rade); box-shadow:var(--ombre-carte); padding:1.4rem var(--gouttiere) 1.8rem; display:none; } .pv-nav_panneau.is-ouvert{ display:block; } .pv-nav_panneau-grille{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1rem; max-width:var(--conteneur); margin-inline:auto; } .pv-nav_panneau-carte{ display:flex; flex-direction:column; gap:.5em; } .pv-nav_panneau-carte img,.pv-nav_panneau-carte .pv-carte-image{ aspect-ratio:3/2; object-fit:cover; } .pv-nav_panneau-carte span{ font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:.92rem; } /* Point 1 — panneau « Le permis » : liste compacte pavillon + libellé (pas de photo à trouver pour 8 pages qui n'en ont pas toutes une dédiée). */ .pv-nav_panneau-grille--liste{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem 1rem; } .pv-nav_panneau-lien{ display:flex; align-items:center; gap:.7em; padding:.6em .3em; min-height:44px; } .pv-nav_panneau-lien svg{ flex:0 0 auto; } .pv-nav_panneau-lien span{ font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:.92rem; } .pv-nav_panneau-lien:hover,.pv-nav_panneau-lien:focus-visible{ color:var(--pavillon); } .pv-nav-mobile_groupe{ font-family:var(--police-corps); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--jaune-q); padding:1em .2em .3em; } .pv-entete_recherche{ flex:0 0 auto; } .pv-recherche-icone{ background:none; border:1px solid var(--coque); width:40px; height:40px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .pv-entete_cta{ flex:0 0 auto; } .pv-burger{ display:none; background:none; border:2px solid var(--nuit); width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer; } @media (max-width:960px){ .pv-nav_liste,.pv-entete_recherche{ display:none; } .pv-burger{ display:flex; } .pv-entete_barre{ flex-wrap:wrap; } } @media (max-width:640px){ .pv-marque_texte{ font-size:1.05rem; } .pv-entete_cta{ display:none; } } .pv-nav-mobile{ display:none; background:var(--nuit); color:var(--voile); padding:1rem var(--gouttiere) 1.6rem; } .pv-nav-mobile.is-ouvert{ display:block; } .pv-nav-mobile_liste{ display:flex; flex-direction:column; gap:.2rem; } .pv-nav-mobile_liste a,.pv-nav-mobile_liste span{ display:flex; align-items:center; gap:.6em; padding:.9em .2em; border-bottom:1px solid rgba(251,251,248,.12); font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1.1rem; min-height:44px; } .pv-nav-mobile_cta{ margin-top:1rem; } /* ========================================================================= 6. BANDES — rythme de page ========================================================================= */ .pv-bande{ padding-block:clamp(3rem,6vw,5.5rem); } .pv-bande--voile{ background:var(--voile); } .pv-bande--rade{ background:var(--rade); } .pv-bande--pavillon{ background:var(--pavillon); color:#fff; } .pv-bande--pavillon h2,.pv-bande--pavillon h3{ color:#fff; } .pv-bande--nuit{ background:var(--nuit); color:var(--voile); } .pv-bande--nuit h2,.pv-bande--nuit h3{ color:var(--voile); } .pv-bande--jaune{ background:var(--jaune-q); color:var(--nuit); } .pv-bande_titre{ font-size:clamp(2rem,4vw,3.4rem); max-width:16ch; margin-bottom:1.2rem; text-wrap:balance; } .pv-bande_intro{ font-size:1.15rem; max-width:62ch; margin-bottom:2.2rem; } /* Point 3 (D3, 28/09) — une bande courte (une seule rangée, ex. le grand pavois) avec le même padding vertical qu'une bande pleine laissait un grand blanc avant la section suivante (homepage-CONSTAT). */ .pv-bande--compact{ padding-block:clamp(1.6rem,3vw,2.4rem); } /* ========================================================================= 7. HÉROS ========================================================================= */ .pv-heros{ position:relative; min-height:min(88vh,780px); display:flex; align-items:flex-end; background:var(--nuit); overflow:hidden; } .pv-heros_fond{ position:absolute; inset:0; z-index:0; } .pv-heros_fond img{ width:100%; height:100%; object-fit:cover; } .pv-heros_voile{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(11,30,51,.92) 5%,rgba(11,30,51,.55) 55%,rgba(11,30,51,.15) 100%); z-index:1; } .pv-heros_corps{ position:relative; z-index:2; color:var(--voile); width:100%; padding-block:3.5rem 4rem; } .pv-heros_h1{ color:#fff; font-size:clamp(2.6rem,6.4vw,6.2rem); max-width:15ch; margin-bottom:.5rem; text-wrap:balance; } .pv-heros_promesse{ font-family:var(--police-corps); font-size:1.2rem; max-width:48ch; margin-bottom:1.8rem; color:var(--rade); } .pv-recherche-hero{ background:rgba(11,30,51,.55); border:1px solid rgba(251,251,248,.35); padding:1.4rem; max-width:640px; display:flex; flex-direction:column; gap:1rem; } .pv-recherche-hero_ligne{ display:flex; gap:.6rem; flex-wrap:wrap; } /* V1 (page-ville-CONSTAT) — champ sans bordure ni fond distinct = invisible sur une carte déjà --voile (seul le libellé se voyait). Un champ se DESSINE toujours (bordure, fond, focus, R-0519), y compris hors du hero sombre. */ .pv-recherche-hero_champ{ flex:1 1 220px; width:100%; background:var(--voile); border:1px solid var(--coque); padding:.9em 1em; font-family:var(--police-corps); font-size:1rem; line-height:1.3; min-height:44px; color:var(--nuit); text-align:left; } .pv-recherche-hero_champ:focus-visible{ border-color:var(--pavillon); } .pv-recherche-hero_champ[readonly]{ background:var(--rade); color:var(--coque); } .pv-recherche-hero_puces{ display:flex; flex-wrap:wrap; gap:.5rem; } .pv-puce-pavillon{ display:inline-flex; align-items:center; gap:.4em; background:rgba(251,251,248,.12); border:1px solid rgba(251,251,248,.35); color:var(--voile); padding:.4em .8em; font-family:var(--police-corps); font-weight:600; font-size:.86rem; min-height:36px; cursor:pointer; } .pv-puce-pavillon svg{ width:20px; height:14px; } .pv-puce-pavillon.is-actif,.pv-puce-pavillon:hover{ background:var(--jaune-q); color:var(--nuit); border-color:var(--jaune-q); } .pv-preuves-coque{ display:flex; flex-wrap:wrap; gap:2.4rem; margin-top:2.2rem; } /* ========================================================================= 8. NUMÉROS DE COQUE — procédé signature n°4 ========================================================================= */ .pv-coque{ display:flex; flex-direction:column; } .pv-coque_chiffre{ font-family:var(--police-titre); font-style:italic; font-weight:700; font-size:clamp(2.6rem,5vw,4.2rem); color:var(--pavillon); line-height:.9; font-variant-numeric:tabular-nums; position:relative; padding-bottom:.35em; border-bottom:6px solid var(--jaune-q); display:inline-flex; align-items:baseline; gap:.15em; } .pv-coque_chiffre span.pv-coque_unite{ font-size:.48em; font-weight:700; font-style:italic; } .pv-coque_chiffre::after{ content:""; position:absolute; right:-20px; bottom:-6px; width:20px; height:6px; background:var(--jaune-q); } .pv-coque_label{ margin-top:.6em; font-family:var(--police-corps); font-size:.92rem; font-weight:600; color:var(--coque); max-width:20ch; } .pv-bande--pavillon .pv-coque_chiffre,.pv-bande--nuit .pv-coque_chiffre{ color:#fff; } .pv-bande--pavillon .pv-coque_label,.pv-bande--nuit .pv-coque_label{ color:var(--rade); } /* Point 4 (constat homepage #6/#7) : sur la photo assombrie du héros, le bleu --pavillon tombe à 2,12:1 et le gris --coque à 2,80:1 — mesuré, sous l'AA. Le héros n'est ni .pv-bande--pavillon ni .pv-bande--nuit : il lui faut sa propre règle. Blanc/rade sur le voile de nuit à 55-92 % = même famille de contraste que nuit/voile (16,2:1), largement au-dessus du seuil. */ .pv-heros .pv-coque_chiffre,.pv-ville-heros .pv-coque_chiffre{ color:#fff; } .pv-heros .pv-coque_label,.pv-ville-heros .pv-coque_label{ color:var(--rade); } /* ========================================================================= 9. CARTES — permis, rubriques, articles, villes ========================================================================= */ /* R-0377 : minmax(0,1fr) sur les colonnes + min-width:0 sur les enfants — sans ça, une carte au contenu large (mot long, tableau) force la grille à déborder au lieu de rétrécir avec elle. */ .pv-grille{ display:grid; gap:var(--gouttiere); min-width:0; } .pv-grille--2{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pv-grille--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } .pv-grille--4{ grid-template-columns:repeat(4,minmax(0,1fr)); } .pv-grille--une{ grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); } .pv-grille--une .pv-carte:first-child{ grid-row:1/3; } @media (max-width:960px){ .pv-grille--3,.pv-grille--4{ grid-template-columns:repeat(2,minmax(0,1fr)); } .pv-grille--une{ grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:640px){ .pv-grille--2,.pv-grille--3,.pv-grille--4,.pv-grille--une{ grid-template-columns:minmax(0,1fr); } .pv-grille--une .pv-carte:first-child{ grid-row:auto; } } .pv-carte{ position:relative; min-width:0; background:var(--blanc); box-shadow:var(--ombre-carte); display:flex; flex-direction:column; } .pv-carte_media{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--rade); } .pv-carte_media img,.pv-carte-image{ width:100%; height:100%; object-fit:cover; } .pv-carte-image--absente{ display:flex; align-items:center; justify-content:center; background:var(--rade); } .pv-carte_pastille{ position:absolute; top:.7rem; left:.7rem; width:44px; height:30px; filter:drop-shadow(0 2px 3px rgba(11,30,51,.35)); } .pv-carte_corps{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.5rem; flex:1; } .pv-carte_eyebrow{ font-family:var(--police-corps); font-size:.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--coque); } .pv-carte_titre{ font-size:1.3rem; margin:0; } .pv-carte_titre a::after{ content:""; position:absolute; inset:0; } .pv-carte_extrait{ font-size:.95rem; color:var(--coque); margin:0; } .pv-carte_meta{ margin-top:auto; padding-top:.6rem; font-size:.8rem; color:var(--coque); display:flex; gap:.8rem; } /* Cartes-permis avec critères en pictos */ .pv-carte-permis .pv-carte_criteres{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; margin-top:.4rem; } .pv-carte-permis .pv-critere{ display:flex; align-items:center; gap:.35em; font-size:.82rem; color:var(--coque); } .pv-carte-permis .pv-critere svg{ width:16px; height:16px; flex:0 0 auto; color:var(--pavillon); } /* ========================================================================= 10. GRAND PAVOIS — procédé signature n°2 (usage : 1 fois par page max) ========================================================================= */ .pv-pavois{ position:relative; padding-block:2rem; } .pv-pavois_drisse{ position:relative; display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; } .pv-pavois_drisse::before{ content:""; position:absolute; left:0; right:0; top:32px; height:2px; background:var(--nuit); transform:rotate(-1.2deg); z-index:0; } .pv-etape{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:.7rem; flex:1; text-align:center; transition:transform .3s ease; } .pv-etape.est-visible{ transform:translateY(-8px); filter:drop-shadow(0 6px 10px rgba(11,30,51,.25)); } .pv-etape_pavillon{ width:46px; height:31px; } .pv-etape_titre{ font-family:var(--police-titre); font-style:italic; font-weight:700; font-size:1rem; margin:0; } .pv-etape_desc{ font-size:.82rem; color:var(--coque); max-width:16ch; margin:0; } .pv-etape_duree{ font-size:.74rem; font-weight:700; color:var(--pavillon); text-transform:uppercase; } @media (max-width:640px){ .pv-pavois_drisse{ flex-direction:column; align-items:flex-start; gap:1.4rem; padding-left:1.2rem; } .pv-pavois_drisse::before{ left:16px; top:0; bottom:0; width:2px; height:auto; right:auto; transform:none; } .pv-etape{ flex-direction:row; text-align:left; } } /* ========================================================================= 11. FEUX DE ROUTE — procédé signature n°3 ========================================================================= */ .pv-feu{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; border:2px solid var(--nuit); flex:0 0 auto; } .pv-feu--vert{ background:var(--tribord); } .pv-feu--rouge{ background:var(--babord); } .pv-feu--eteint{ background:var(--rade); } .pv-reponse-etat{ display:flex; align-items:center; gap:.5em; font-weight:700; } .pv-reponse-etat--vert{ color:var(--tribord); } .pv-reponse-etat--rouge{ color:var(--babord); } /* ========================================================================= 12. ESTIMATEUR — bande pavillon ========================================================================= */ .pv-estimateur{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2.5rem; align-items:start; } .pv-estimateur_texte{ min-width:0; color:#fff; } .pv-estimateur_outil{ min-width:0; background:var(--voile); color:var(--nuit); padding:1.6rem; } .pv-estimateur_etapes{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem; } .pv-estimateur_champ-label{ display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem; } .pv-estimateur_champ-ville{ background:var(--rade); margin-bottom:1rem; } .pv-estimateur_resultat{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--rade); } .pv-decomposition{ display:flex; height:16px; width:100%; overflow:hidden; margin:.8rem 0; } .pv-decomposition_segment{ height:100%; } .pv-decomposition_segment--etat{ background:var(--nuit); } .pv-decomposition_segment--formation{ background:var(--pavillon); } .pv-decomposition_segment--reste{ background:repeating-linear-gradient(45deg,var(--jaune-q),var(--jaune-q) 6px,#f2ae00 6px,#f2ae00 12px); } .pv-estimateur_source{ font-size:.78rem; color:var(--coque); } .pv-bouton--fonce-actif{ background:var(--pavillon) !important; color:#fff !important; } @media (max-width:800px){ .pv-estimateur{ grid-template-columns:1fr; } } /* ========================================================================= 13. FAQ — accordéon natif details/summary ========================================================================= */ /* Point 6 (constat homepage #8) : la FAQ seule (820 px) laissait 600 px de vide à droite sur une page de 1440. Sur les pages où elle n'est PAS la seule section de son écran (l'accueil), on lui donne une colonne voisine utile (repère de confiance) au lieu d'élargir l'accordéon lui-même — un accordéon trop large redevient illisible (ligne de plus de 75 signes). */ .pv-faq-grille{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,340px); gap:2.5rem; align-items:start; } .pv-faq-visuel{ background:var(--rade); padding:2rem 1.6rem; display:flex; flex-direction:column; align-items:flex-start; gap:1rem; min-width:0; } .pv-faq-visuel_pavillon{ width:56px; height:38px; } .pv-faq-visuel_titre{ font-size:1.5rem; margin:0; } .pv-faq-visuel_texte{ color:var(--coque); font-size:.95rem; margin:0; } @media (max-width:900px){ .pv-faq-grille{ grid-template-columns:1fr; } } .pv-faq{ max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:.7rem; } .pv-faq-grille .pv-faq{ max-width:none; margin-inline:0; } .pv-faq_item{ background:var(--blanc); border:1px solid var(--rade); } .pv-faq_item summary{ font-family:var(--police-titre); font-style:italic; font-weight:700; font-size:1.2rem; text-transform:none; padding:1rem 1.2rem; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; list-style:none; min-height:44px; } .pv-faq_item summary::-webkit-details-marker{ display:none; } .pv-faq_chevron{ flex:0 0 auto; transition:transform .2s ease; } .pv-faq_item[open] .pv-faq_chevron{ transform:rotate(45deg); } .pv-faq_item_corps{ padding:0 1.2rem 1.2rem; color:var(--coque); } /* ========================================================================= 14. ARTICLE ========================================================================= */ .pv-article-heros{ background:var(--nuit); } .pv-fil{ font-size:.8rem; color:var(--rade); display:flex; gap:.4rem; flex-wrap:wrap; padding-bottom:1rem; } .pv-fil a{ text-decoration:underline; } .pv-article-titre{ color:#fff; font-size:clamp(2rem,4.6vw,3.4rem); max-width:20ch; margin-bottom:.8rem; text-wrap:balance; } .pv-article-chapo{ font-family:var(--police-corps); color:var(--rade); font-size:1.15rem; max-width:64ch; margin-bottom:1.6rem; } .pv-article-meta{ display:flex; align-items:center; gap:1rem; color:var(--rade); font-size:.85rem; flex-wrap:wrap; } /* Point 13 (D2) — héros compact en 2 colonnes : texte à gauche, image à droite, pour que le premier paragraphe du corps arrive tout de suite après (article-CONSTAT ROUGE 7, R-0509). */ .pv-article-heros_grille{ display:grid; grid-template-columns:minmax(0,1fr) minmax(240px,380px); gap:2.2rem; align-items:center; padding-block:2rem; } .pv-article-heros_texte{ min-width:0; } .pv-article-heros_image{ position:relative; max-height:320px; overflow:hidden; align-self:stretch; } .pv-article-heros_image img{ width:100%; height:100%; max-height:320px; object-fit:cover; } .pv-article-image_pastille{ position:absolute; top:1rem; left:1rem; width:56px; height:38px; } @media (max-width:900px){ .pv-article-heros_grille{ grid-template-columns:1fr; padding-block:1.4rem; gap:1.1rem; } .pv-article-heros_image{ max-height:200px; } .pv-article-heros_image img{ max-height:200px; } } .pv-article-mise-en-page{ display:grid; grid-template-columns:minmax(0,720px) minmax(280px,340px); gap:3rem; max-width:var(--conteneur); margin-inline:auto; padding-block:2rem 3rem; align-items:start; } .pv-article-colonne{ min-width:0; } .pv-article-corps{ font-size:1.05rem; } .pv-article-corps h2{ font-size:1.9rem; margin-top:2.2em; scroll-margin-top:100px; text-transform:none; } .pv-article-corps h3{ font-size:1.35rem; margin-top:1.6em; text-transform:none; } .pv-article-corps p{ margin-bottom:1.3em; } .pv-article-corps a{ color:var(--pavillon); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; } .pv-article-corps strong{ font-weight:700; } .pv-article-corps img{ margin-block:2rem; clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%); } .pv-article-corps blockquote{ border-left:4px solid var(--jaune-q); padding:.6rem 0 .6rem 1.2rem; font-style:italic; color:var(--coque); margin:2rem 0; } /* Aucune liste à puces navigateur : tout passe par des cartes/infographies. */ .pv-article-corps ul:not([class]),.pv-article-corps ol:not([class]){ padding-left:1.3em; } .pv-article-corps ul:not([class]) li{ list-style:disc; margin-bottom:.5em; } /* Encadrés À savoir / Piège d'examen */ .pv-encart{ padding:1.1rem 1.3rem; margin:2rem 0; background:var(--rade); border-left:6px solid var(--tribord); } .pv-encart--piege{ border-left-color:var(--babord); background:#FBECEC; } .pv-encart_titre{ font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1rem; margin-bottom:.4em; } /* Encadrés émis dans le corps (aside.pv-encadre) — pavillon de signal en marque : jaune « À retenir », bleu « Le saviez-vous ? », feu bâbord rouge « Attention » (le rouge reste réservé au sens danger, comme .pv-feu--rouge et .pv-form-erreur ailleurs dans ce fichier). Respiration R-0539 : marge verticale 2.4rem toujours ≥ celle des images voisines (margin-block:2rem), les marges se cumulent au plus grand des deux, jamais collé. */ .pv-encadre{ position:relative; min-width:0; background:var(--voile); border:1px solid var(--rade); border-left:6px solid var(--coque); padding:1.3rem 1.5rem 1.4rem 1.7rem; margin:2.4rem 0; } .pv-encadre_titre{ display:flex; align-items:center; gap:.55em; font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1rem; letter-spacing:-.005em; margin:0 0 .5em; color:var(--nuit); } /* Fanion en pennant — même procédé clip-path que la coupe d'étrave (§2). */ .pv-encadre_titre::before{ content:""; flex:0 0 auto; width:22px; height:15px; clip-path:polygon(0 0,100% 0,78% 50%,100% 100%,0 100%); background:var(--coque); } .pv-encadre p{ font-size:.95rem; color:var(--coque); } .pv-encadre p:last-child{ margin-bottom:0; } .pv-encadre--retenir{ border-left-color:var(--jaune-q); background:rgba(255,194,14,.1); } .pv-encadre--retenir .pv-encadre_titre::before{ background:var(--jaune-q); } .pv-encadre--astuce{ border-left-color:var(--pavillon); background:rgba(11,69,194,.06); } .pv-encadre--astuce .pv-encadre_titre{ color:var(--pavillon); } .pv-encadre--astuce .pv-encadre_titre::before{ background:var(--pavillon); } .pv-encadre--attention{ border-left-color:var(--babord); background:#FBECEC; } .pv-encadre--attention .pv-encadre_titre{ color:var(--babord); } .pv-encadre--attention .pv-encadre_titre::before{ background:var(--babord); } .pv-sommaire{ background:var(--rade); padding:1.2rem; margin-bottom:2rem; } .pv-sommaire_titre{ font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1rem; margin-bottom:.6em; } .pv-sommaire-liste{ display:flex; flex-direction:column; gap:.35em; } .pv-sommaire-liste a{ font-size:.92rem; color:var(--pavillon); text-decoration:underline; } /* Colonne latérale : sticky, sans défilement interne, pub en dernier. Point 15 (D2) — le sommaire vit ICI (mêmes largeurs/espacements que les autres modules, R-0547) ; le module ville est un encart COURT (1 champ), jamais le formulaire complet (R-0595 esprit). */ .pv-aside{ position:sticky; top:96px; min-width:0; display:flex; flex-direction:column; gap:1.4rem; } .pv-aside .pv-sommaire{ margin-bottom:0; } .pv-aside_module{ background:var(--blanc); border:1px solid var(--rade); padding:1.2rem; } .pv-aside_module--pub{ order:99; text-align:center; } .pv-aside_module_titre{ font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1.05rem; margin-bottom:.6em; } .pv-aside_note{ font-size:.88rem; color:var(--coque); margin-bottom:.8rem; } .pv-aside_recherche{ display:flex; gap:.5rem; flex-wrap:wrap; } .pv-aside_recherche_champ{ flex:1 1 120px; min-width:0; border:1px solid var(--coque); padding:.6em .8em; font-family:var(--police-corps); font-size:.9rem; min-height:44px; background:var(--voile); color:var(--nuit); } .pv-aside_recherche_champ:focus-visible{ border-color:var(--pavillon); } /* Bloc auteur — un seul, jamais dupliqué */ .pv-auteur{ display:flex; gap:1.2rem; align-items:flex-start; padding:1.6rem; margin-top:3rem; background:var(--rade); } .pv-portrait{ border-radius:50%; width:72px; height:72px; object-fit:cover; flex:0 0 auto; border:2px solid var(--nuit); } .pv-auteur_corps{ display:flex; flex-direction:column; gap:.3rem; } .pv-auteur_nom{ font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1.15rem; } .pv-auteur_role{ font-size:.85rem; font-weight:600; color:var(--pavillon); text-transform:uppercase; letter-spacing:.03em; } .pv-auteur_bio{ font-size:.9rem; color:var(--coque); margin:.3rem 0; max-width:60ch; } .pv-auteur_verifie{ font-size:.78rem; color:var(--coque); } .pv-auteur_lien{ font-size:.85rem; font-weight:700; color:var(--pavillon); text-decoration:underline; align-self:flex-start; } /* Sources — cadre soigné, numéroté, jamais un lien cliquable (AR-004/AR-032/AR-040) */ .sbs_source{ display:block; font-size:.8rem; color:var(--coque); margin-top:.6rem; } .pv-sources{ display:block; min-width:0; margin-top:2.6rem; padding-top:1.3rem; border-top:1px solid var(--rade); } .pv-sources h2{ font-size:.95rem; text-transform:uppercase; font-style:normal; font-weight:700; color:var(--coque); margin-bottom:.8rem; } /* R-0880 : numéros alignés quel que soit le nombre de chiffres (1 comme 12) — compteur CSS dans un repère de largeur fixe plutôt que `list-style:decimal`, dont le marqueur navigateur décale le texte dès la 2ᵉ colonne de chiffres. Spécificité : le reset global `ol[class]{list-style:none}` (0,1,1) restait déjà neutralisé côté marqueur natif, on repart de zéro proprement ici. */ ol.pv-sources_liste{ list-style:none; counter-reset:pv-source; padding-left:0; margin:0; display:flex; flex-direction:column; gap:.55rem; } .pv-sources_liste li{ position:relative; min-width:0; padding-left:2.1em; font-size:.82rem; line-height:1.55; color:var(--coque); /* dates/nombres jamais coupés en plein milieu au retour à la ligne */ hyphens:none; overflow-wrap:normal; } .pv-sources_liste li::before{ counter-increment:pv-source; content:counter(pv-source) "."; position:absolute; left:0; top:0; width:1.6em; text-align:right; font-weight:700; color:var(--pavillon); font-variant-numeric:tabular-nums; } /* Emplacement publicitaire (réservé, jamais sur accueil/catégorie — MK-002) */ .pv-pub-espace{ min-height:250px; display:flex; align-items:center; justify-content:center; background:var(--rade); color:var(--coque); font-size:.8rem; } /* Ligne d'en-tête pilier : pastille + titre côte à côte */ .pv-pilier-heros-ligne{ display:flex; align-items:center; gap:1.4rem; } .pv-pilier-pastille{ position:static; width:64px; height:43px; flex:0 0 auto; } /* Articles liés */ .pv-lies{ margin-top:3rem; } .pv-lies_titre{ font-size:1.6rem; margin-bottom:1.2rem; } /* Encart CTA bateau-école dans le corps */ .pv-encart-cta{ display:flex; align-items:center; gap:1.4rem; background:var(--nuit); color:var(--voile); padding:1.6rem; margin:2.5rem 0; flex-wrap:wrap; } .pv-encart-cta_texte{ flex:1 1 240px; } .pv-encart-cta_titre{ font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1.3rem; color:#fff; margin-bottom:.3em; } .pv-encart-cta_desc{ font-size:.92rem; color:var(--rade); margin:0; } /* ========================================================================= 15. TABLEAUX (socle-mobile fournit .sbs_tableau, on l'habille) ========================================================================= */ .sbs_tableau{ overflow-x:auto; margin:2rem 0; -webkit-overflow-scrolling:touch; } .sbs_tableau table{ width:100%; border-collapse:collapse; min-width:480px; } .sbs_tableau caption{ text-align:left; font-family:var(--police-titre); font-style:italic; font-weight:700; margin-bottom:.5em; } .sbs_tableau th,.sbs_tableau td{ padding:.7em .9em; border-bottom:1px solid var(--rade); text-align:left; font-size:.92rem; white-space:nowrap; } .sbs_tableau thead th{ background:var(--nuit); color:#fff; font-family:var(--police-titre); font-style:italic; text-transform:uppercase; font-weight:700; } .sbs_tableau tbody tr:nth-child(even){ background:var(--rade); } /* ========================================================================= 16. INFOGRAPHIES DU SOCLE — habillage visuel (aucune couleur dans le socle) ========================================================================= */ sbs-lieu,.sbs_lieu{ display:block; background:var(--rade); padding:1.2rem; margin:2rem 0; } .sbs_lieu_nom{ display:block; font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1.15rem; } .sbs_lieu_adresse{ display:block; font-style:normal; color:var(--coque); font-size:.9rem; margin:.3em 0; } .sbs_lieu_acces{ display:block; color:var(--coque); font-size:.85rem; } .sbs_lieu_carte{ display:inline-flex; align-items:center; gap:.4em; margin-top:.6em; color:var(--pavillon); font-weight:700; font-size:.85rem; } .pv-icone-repere,.sbs_icone_repere{ width:18px; height:18px; fill:currentColor; } sbs-tarifs,.sbs_tarifs{ display:block; min-width:0; background:var(--blanc); border:1px solid var(--rade); padding:1.3rem 1.4rem; margin:2.4rem 0; } .sbs_tarifs_titre{ display:block; font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1.1rem; margin-bottom:.9em; } sbs-tarif,.sbs_tarif{ display:flex; align-items:center; gap:1rem; min-width:0; margin-bottom:.8em; } .sbs_tarif_libelle{ flex:0 0 38%; min-width:0; font-size:.88rem; font-weight:600; color:var(--coque); } .sbs_tarif_barre{ flex:1 1 auto; min-width:0; width:100%; height:18px; accent-color:var(--pavillon); } .sbs_tarifs_notes{ display:block; margin-top:.7em; font-size:.8rem; color:var(--coque); } /* Frise pavoisée : ligne verticale + fanion clip-path par étape — même procédé signature que la coupe d'étrave (§2) et le grand pavois (§10). Décalages TOUJOURS positifs (padding-left du conteneur, jamais de left négatif au-delà de l'écran) : le gabarit d'article n'a pas de padding horizontal propre sur mobile, un offset négatif s'y ferait rogner. */ sbs-frise,.sbs_frise{ position:relative; display:block; min-width:0; margin:2.4rem 0; padding-left:2rem; } .sbs_frise::before{ content:""; position:absolute; left:7px; top:.35em; bottom:.35em; width:2px; background:var(--pavillon); } .sbs_frise_titre{ display:block; font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1.1rem; margin-bottom:.9em; } sbs-etape,.sbs_etape{ position:relative; display:block; min-width:0; margin-bottom:1.3em; } sbs-etape::before,.sbs_etape::before{ content:""; position:absolute; left:-1px; top:.28em; width:16px; height:11px; background:var(--jaune-q); clip-path:polygon(0 0,100% 0,78% 50%,100% 100%,0 100%); } .sbs_etape_date{ display:block; font-weight:700; color:var(--pavillon); font-size:.85rem; font-variant-numeric:tabular-nums; } .sbs_etape_titre{ display:block; font-family:var(--police-titre); font-style:italic; font-weight:700; margin:.15em 0; } .sbs_etape_desc{ display:block; color:var(--coque); font-size:.88rem; } /* Jauges = numéros de coque (§8) : chiffre condensé italique, soulignement jaune, compteur animé par app.js (data-sbs-anim, respecte déjà prefers-reduced-motion — rien à ajouter côté JS). */ sbs-jauges,.sbs_jauges{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1.6rem; margin:2.4rem 0; min-width:0; } .sbs_jauges_titre{ grid-column:1/-1; font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1.1rem; } sbs-jauge,.sbs_jauge{ display:flex; flex-direction:column; min-width:0; } .sbs_jauge_valeur{ font-family:var(--police-titre); font-style:italic; font-weight:700; font-size:clamp(1.9rem,5vw,2.6rem); color:var(--pavillon); line-height:.95; font-variant-numeric:tabular-nums; display:inline-flex; align-items:baseline; gap:.12em; width:fit-content; max-width:100%; border-bottom:6px solid var(--jaune-q); padding-bottom:.18em; } .sbs_jauge_unite{ font-size:.7em; font-weight:700; font-style:italic; color:var(--pavillon); } .sbs_jauge_libelle{ font-size:.82rem; font-weight:600; color:var(--coque); order:-1; margin-bottom:.3em; } /* ========================================================================= 16 bis. PAGE VILLE — le héros vend, le formulaire est visible sans défiler ========================================================================= */ .pv-ville-heros{ position:relative; background:var(--nuit); overflow:hidden; } .pv-ville-heros_fond{ position:absolute; inset:0; z-index:0; } .pv-ville-heros_fond img{ width:100%; height:100%; object-fit:cover; } .pv-ville-heros_voile{ position:absolute; inset:0; background:linear-gradient(100deg,rgba(11,30,51,.94) 38%,rgba(11,30,51,.55) 100%); z-index:1; } /* V2/V3 (page-ville-CONSTAT) — 3 zones nommées plutôt que 2 colonnes brutes : « intro » (titre/chapô/pastille) et « extra » (chiffres + Comment ça marche) à gauche, « form » à droite en pleine hauteur sur desktop. Sur mobile, la grille redevient une colonne et l'ORDRE change (intro → form → extra) pour que le formulaire reste dans le premier écran (390 px) sans faire disparaître les chiffres ni le réassurance, juste repoussés après. */ .pv-ville-heros_grille{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,420px); grid-template-areas:"intro form"; gap:2.2rem 2.5rem; align-items:start; padding-block:3rem; } /* Point 5 (D3, 28/09) — intro + chiffres + « Comment ça marche » ne forment plus 2 lignes de grille distinctes : le formulaire les enjambait et forçait la 1re ligne à s'étirer au-delà du texte réel (vide sous le chapô, page-ville-CONSTAT). Regroupés en UNE zone (colonne, display:flex), alignée en haut avec le formulaire. En 390 px la colonne se déboîte (display:contents) pour laisser le formulaire reprendre sa place ENTRE les deux (R-0133, media query ci-dessous). */ .pv-ville-heros_colonne{ grid-area:intro; min-width:0; display:flex; flex-direction:column; gap:2rem; } .pv-ville-heros_texte{ min-width:0; } .pv-ville-form-carte{ grid-area:form; } .pv-ville-heros_extra{ min-width:0; } .pv-ville-heros_h1{ color:#fff; font-size:clamp(2.2rem,5vw,4rem); max-width:14ch; margin-bottom:.6rem; text-wrap:balance; } .pv-ville-heros_promesse{ color:var(--rade); font-size:1.1rem; max-width:44ch; margin-bottom:0; } .pv-ville-preuves{ display:flex; flex-wrap:wrap; gap:1.6rem; } .pv-ville-pastille-type{ display:inline-flex; align-items:center; gap:.4em; background:var(--jaune-q); color:var(--nuit); font-weight:700; font-size:.78rem; text-transform:uppercase; padding:.4em .8em; margin-bottom:1rem; } .pv-ville-comment{ margin-top:2rem; padding-top:1.6rem; border-top:1px solid rgba(251,251,248,.25); } .pv-ville-comment_titre{ font-family:var(--police-titre); font-style:italic; font-weight:700; text-transform:uppercase; font-size:1.05rem; color:#fff; margin-bottom:.9rem; } .pv-ville-etapes{ display:flex; flex-direction:column; gap:.7rem; margin-bottom:1.2rem; } .pv-ville-etapes li{ display:flex; align-items:flex-start; gap:.7em; color:var(--rade); font-size:.92rem; } .pv-ville-etape_num{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; background:var(--jaune-q); color:var(--nuit); font-family:var(--police-titre); font-style:italic; font-weight:700; font-size:.85rem; } .pv-ville-reassurance{ display:flex; align-items:center; gap:.5em; color:#fff; font-weight:600; font-size:.9rem; margin:0; } @media (max-width:900px){ .pv-ville-heros_grille{ grid-template-columns:minmax(0,1fr); grid-template-areas:"intro" "form" "extra"; gap:1.6rem; padding-block:2rem; } .pv-ville-heros_colonne{ display:contents; } .pv-ville-heros_texte{ grid-area:intro; } .pv-ville-heros_extra{ grid-area:extra; } } .pv-ville-form-carte{ background:var(--voile); color:var(--nuit); padding:1.6rem; box-shadow:var(--ombre-carte); min-width:0; } .pv-ville-form-titre{ font-size:1.4rem; margin-bottom:.3rem; } .pv-ville-form-sous{ font-size:.86rem; color:var(--coque); margin-bottom:1.2rem; } .pv-form-groupe{ display:flex; flex-direction:column; gap:.9rem; margin-bottom:1rem; } /* Point 4 (D3, 28/09) — les