/* Theme Name: Occiform Author: Occiform Version: 1.9.5 Requires at least: 6.3 Requires PHP: 7.4 Text Domain: occiform */ /* ========================================================================== 1. POLICES (hébergées dans le thème : aucune requête vers Google = RGPD OK) Inter par défaut, Figtree au choix : Contenu du site > Police et style. Le navigateur ne télécharge que la police utilisée. ========================================================================== */ @font-face { font-family: "Inter"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/figtree-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("assets/fonts/figtree-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/figtree-latin-700-normal.woff2") format("woff2"); } /* ========================================================================== 2. COULEURS ET RÉGLAGES — pour changer une couleur, c'est ici et nulle part ailleurs Contrastes vérifiés (accessibilité, niveau AA) : - texte sur crème 16:1, texte doux sur crème 8,3:1 - bleu lisible sur crème 5,1:1, sur bleu clair 4,7:1, sur vert clair 4,8:1 - encre sur bouton vert 9,4:1, blanc sur bleu nuit 7,6:1 Les icônes et décors sont dessinés en SVG dans ce fichier (aucune image externe). Dans ces SVG, le « # » des couleurs s'écrit « %23 ». ========================================================================== */ :root { --bleu: #2bacdb; /* bleu du logo (décor) */ --bleu-fonce: #1a7396; /* bleu lisible : textes, liens, boutons secondaires */ --bleu-tres-fonce: #135a76; /* bleu nuit : chiffres clés, en-tête du tableau */ --bleu-clair: #e6f4f9; /* fond des bandes bleues, pastilles */ --vert: #c6d92e; /* vert du logo : boutons d'action principale */ --vert-vif: #d4e44a; /* bouton vert au survol */ --vert-fonce: #5f6a10; /* vert lisible : texte, liseré des boutons verts */ --vert-clair: #f2f6da; /* fond des bandes vertes */ --vert-pale: #eef4c8; /* grande forme décorative du haut de page */ --encre: #0d2b3a; /* texte sur les boutons verts */ --fond: #fffaf2; /* fond général : crème, plus chaleureux que le blanc */ --fond-2: #f7efe2; /* sable : bandeau du haut, pied de page */ --blanc: #ffffff; /* cartes, formulaire */ --texte: #201e1d; --texte-doux: #4f4b47; --trait: #eadfcd; /* filets : beige doux */ --trait-bleu: rgba(26, 115, 150, .18); /* contour léger des cartes sur fond coloré */ --trait-champ: #767f87; /* contour des champs : assez foncé pour être bien visible */ --erreur: #a61b1b; --largeur: 1200px; --marge: clamp(20px, 5vw, 72px); --arrondi: 22px; /* cartes */ --arrondi-grand: 32px; /* grands panneaux colorés */ /* Ombres « chaudes » (brun très léger) */ --ombre: 0 1px 2px rgba(90, 60, 20, .05), 0 14px 34px -14px rgba(90, 60, 20, .22); --ombre-forte: 0 2px 4px rgba(90, 60, 20, .05), 0 24px 48px -18px rgba(90, 60, 20, .28); --police: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .police-figtree { --police: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } /* Inter est un peu plus large que Figtree : le menu passe à 15 px pour tenir sur une ligne */ @media (min-width: 1100px) { .police-inter .menu a:not(.btn) { font-size: 15px; } } /* ========================================================================== 3. BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-padding-top: 96px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--fond); color: var(--texte); font-family: var(--police); font-size: 1rem; line-height: 1.65; overflow-x: clip; } h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 .5em; } /* Lignes équilibrées : pas de mot seul en fin de titre ou de bouton */ h1, h2, h3, h4, summary, .btn, .profil strong, .profil span, .puces li, .champ label, .chiffre span, .sur-titre { text-wrap: balance; } h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -0.015em; } h3, .h3 { font-size: 22px; } h4 { font-size: 18px; } p { margin: 0 0 1em; } img { display: block; max-width: 100%; height: auto; } figure { margin: 0; } a { color: var(--bleu-fonce); text-decoration: none; } a:hover { text-decoration: underline; } /* Dans les paragraphes, les liens sont soulignés : on les repère sans dépendre de la couleur. */ main p a:not(.btn), .page-simple a { text-decoration: underline; text-underline-offset: 3px; } :focus-visible { outline: 3px solid var(--bleu-fonce); outline-offset: 3px; } ::selection { background: var(--bleu-clair); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link:focus { position: fixed !important; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 10px 16px; background: var(--blanc); border-radius: 999px; box-shadow: var(--ombre); } .conteneur { max-width: var(--largeur); margin: 0 auto; padding-left: var(--marge); padding-right: var(--marge); } .section { padding-top: 72px; padding-bottom: 72px; } .section--courte { padding-top: 40px; padding-bottom: 40px; } @media (max-width: 700px) { .section { padding-top: 36px; padding-bottom: 36px; } .section--courte { padding-top: 24px; padding-bottom: 24px; } } /* Bandes de couleur (à ajouter sur une
) : de grands panneaux arrondis posés sur le fond crème, avec un anneau du logo en décor dans le coin. */ .bande--bleue { background: var(--bleu-clair); } .bande--verte { background: var(--vert-clair); } .bande--foncee { background: var(--bleu-tres-fonce); color: var(--blanc); } .bande--bleue, .bande--verte, .bande--foncee { position: relative; isolation: isolate; overflow: hidden; margin-left: clamp(6px, 2vw, 32px); margin-right: clamp(6px, 2vw, 32px); border-radius: var(--arrondi-grand); } /* Deux bandes qui se suivent (Emploi puis Contact) : un peu d'air entre elles */ [class*="bande--"] + [class*="bande--"] { margin-top: 20px; } .bande--verte::before, .bande--bleue::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 280px; height: 280px; right: -90px; top: -90px; background: url("data:image/svg+xml,") center / contain no-repeat; } .bande--bleue::before { background-image: url("data:image/svg+xml,"); } /* Sur fond foncé : liens et contour clavier en blanc pour rester lisibles */ .bande--foncee a:not(.btn) { color: var(--blanc); text-decoration-color: var(--vert); } .bande--foncee :focus-visible { outline-color: var(--blanc); } @media (max-width: 700px) { .bande--bleue, .bande--verte, .bande--foncee { border-radius: 26px; } [class*="bande--"] + [class*="bande--"] { margin-top: 12px; } .bande--verte::before, .bande--bleue::before { width: 160px; height: 160px; right: -100px; top: -100px; } } /* Petit titre au-dessus des titres de section, avec les deux ronds du logo */ .sur-titre { display: block; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--bleu-fonce); margin: 0 0 12px; } .sur-titre::before { content: ""; display: inline-block; width: 30px; height: 14px; vertical-align: middle; margin: -2px 10px 0 0; background: url("data:image/svg+xml,") center / contain no-repeat; } .intro { font-size: 18px; line-height: 1.7; color: var(--texte-doux); max-width: 40em; text-wrap: pretty; } .texte-doux { color: var(--texte-doux); } .accent { color: var(--bleu-fonce); } .titre-bloc { font-size: clamp(24px, 2.6vw, 30px); margin-top: 48px; margin-bottom: 20px; } /* Deux colonnes qui passent l'une sous l'autre sur mobile */ .grille-2 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px clamp(24px, 5vw, 72px); align-items: center; } .grille-contact { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); grid-template-rows: auto 1fr; grid-template-areas: "intro formulaire" "infos formulaire"; gap: 8px clamp(24px, 4vw, 56px); align-items: start; } .contact-intro { grid-area: intro; } .contact-infos { grid-area: infos; } .carte-formulaire { grid-area: formulaire; } @media (max-width: 900px) { .grille-2 { grid-template-columns: 1fr; } /* Sur mobile, le formulaire passe juste après le titre, avant les coordonnées */ .grille-contact { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "intro" "formulaire" "infos"; gap: 24px; } } /* ========================================================================== 4. BOUTONS ET FORMULAIRE Une seule couleur pour l'action principale (devis, inscription, envoi) : le vert du logo. Les autres actions sont des boutons à contour bleu. ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 22px; border-radius: 999px; border: 2px solid transparent; font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2; text-align: center; cursor: pointer; text-decoration: none !important; transition: background-color .15s, box-shadow .15s, transform .15s; } .btn-large { min-height: 52px; padding: 12px 26px; font-size: 17px; } /* Bouton vert avec un liseré olive dessous : il se détache aussi sur les fonds clairs */ .btn-primaire { background: var(--vert); color: var(--encre); box-shadow: 0 4px 0 var(--vert-fonce); } .btn-primaire:hover { background: var(--vert-vif); color: var(--encre); } .btn-primaire:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--vert-fonce); } .btn-secondaire { border-color: var(--bleu-fonce); color: var(--bleu-fonce); background: var(--blanc); } .btn-secondaire:hover { background: var(--bleu-clair); } @media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-1px); } } .boutons { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; } .carte-formulaire { background: var(--blanc); border-radius: 28px; box-shadow: var(--ombre-forte); padding: clamp(20px, 3vw, 36px); } .formulaire { display: grid; gap: 18px; } .formulaire .ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .formulaire .ligne:has(select) { grid-template-columns: 1fr; } /* les intitulés des listes s'affichent en entier */ .formulaire .btn-large { justify-self: start; } @media (max-width: 560px) { .formulaire .ligne { grid-template-columns: 1fr; } .formulaire .btn-large { justify-self: stretch; } .carte-formulaire { padding: 20px 18px; border-radius: 24px; } } .champ label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 6px; color: var(--texte); } /* 16 px minimum : sinon l'iPhone zoome tout seul quand on touche le champ */ .champ input, .champ select, .champ textarea { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--texte); background: var(--blanc); border: 1px solid var(--trait-champ); border-radius: 14px; } .champ textarea { min-height: 120px; resize: vertical; } /* Au focus : contour bleu + halo bleu clair très doux */ .champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--bleu-fonce); outline-offset: 1px; border-color: var(--bleu-fonce); box-shadow: 0 0 0 6px var(--bleu-clair); } .champ input:user-invalid, .champ select:user-invalid { border: 2px solid var(--erreur); } .champ.a-corriger input, .champ.a-corriger select { border: 2px solid var(--erreur); } .consentement { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--texte); cursor: pointer; } .consentement a { text-decoration: underline; } .consentement input { width: 22px; height: 22px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--bleu-fonce); } .consentement:has(input[aria-invalid="true"]) { outline: 2px solid var(--erreur); outline-offset: 6px; border-radius: 8px; } .pot-de-miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .message-form { padding: 14px 18px; border-radius: 16px; font-weight: 600; margin: 0 0 18px; } .message-form--erreur { background: #fdecec; color: var(--erreur); border: 2px solid #f2b8b8; } .confirmation { text-align: center; padding: 12px 4px; } .confirmation-titre { font-size: 22px; font-weight: 700; color: var(--vert-fonce); } .confirmation-titre::before { content: ""; display: block; width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--vert) url("data:image/svg+xml,") center / 28px no-repeat; } .petit { font-size: 16px; color: var(--texte-doux); margin: 0; } /* ========================================================================== 5. EN-TÊTE ET MENU ========================================================================== */ .bandeau { background: var(--fond-2); font-size: 16px; } .bandeau .conteneur { display: flex; gap: 0 28px; flex-wrap: wrap; justify-content: space-between; align-items: center; } .bandeau-infos { display: flex; gap: 0 20px; flex-wrap: wrap; align-items: center; color: var(--texte-doux); } .bandeau-infos a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; padding: 0 6px; margin: 0 -6px; } .bandeau-infos a:focus-visible { outline-offset: -3px; } /* « Organisme certifié Qualiopi » avec une coche dans un rond */ .bandeau-qualiopi { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--bleu-fonce); } .bandeau-qualiopi::before, .label-qualiopi::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: url("data:image/svg+xml,") center / contain no-repeat; } @media (max-width: 640px) { .bandeau-infos span { display: none; } } /* Sur tablette, la mention Qualiopi est déjà dans le haut de page : le bandeau reste sur une ligne */ @media (max-width: 899px) { .bandeau-qualiopi { display: none; } } .home .bandeau-qualiopi { display: none; } /* sur l'accueil, l'étiquette du haut de page suffit */ /* Barre du logo et du menu : même crème que la page, légèrement transparente */ .entete { position: sticky; top: 0; z-index: 50; background: rgba(255, 250, 242, .96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--trait); } .entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 10px; padding-bottom: 10px; } .logo { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 44px; } .logo img { height: 56px; width: auto; } .menu { display: flex; align-items: center; gap: 22px; } .menu ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; } .menu ul a { display: inline-flex; align-items: center; min-height: 44px; } .menu a:not(.btn) { color: var(--texte); font-size: 16px; font-weight: 600; white-space: nowrap; } .menu a:not(.btn):hover { color: var(--bleu-fonce); } .menu ul a[aria-current] { color: var(--bleu-fonce); text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--vert); text-underline-offset: 8px; } .menu-tel { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--bleu-fonce) !important; font-weight: 700 !important; } .menu .btn { white-space: nowrap; } @media (min-width: 1100px) and (max-width: 1279px) { .entete .conteneur, .menu, .menu ul { gap: 14px; } } /* Bouton « Menu » (téléphone / tablette) : pilule avec l'icône ≡, qui devient une croix une fois ouvert */ .menu-bouton { display: none; gap: 8px; min-height: 44px; background: var(--blanc); border: 2px solid var(--bleu-fonce); color: var(--bleu-fonce); border-radius: 999px; padding: 8px 18px 8px 14px; font: inherit; font-weight: 700; cursor: pointer; } .menu-bouton::before { content: ""; width: 20px; height: 20px; flex: 0 0 auto; background: url("data:image/svg+xml,") center / contain no-repeat; } .menu-bouton[aria-expanded="true"] { background: var(--bleu-clair); } .menu-bouton[aria-expanded="true"]::before { background-image: url("data:image/svg+xml,"); } /* Menu repliable : téléphones, tablettes et petits écrans */ @media (max-width: 1099px) { html { scroll-padding-top: 76px; scroll-padding-bottom: 96px; } /* rien ne passe sous la barre du bas */ .entete { z-index: 70; } /* le menu ouvert passe au-dessus de la barre du bas */ .logo img { height: 42px; } .entete .conteneur { padding-top: 8px; padding-bottom: 8px; } .menu-bouton { display: inline-flex; align-items: center; } .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 4px var(--marge) 20px; background: var(--fond); border-bottom: 1px solid var(--trait); border-radius: 0 0 26px 26px; box-shadow: 0 24px 40px -16px rgba(90, 60, 20, .3); max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; } .menu.est-ouvert { display: flex; } .menu ul { flex-direction: column; gap: 0; } .menu li a, .menu-tel { display: flex; align-items: center; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--trait); font-size: 17px !important; } .menu ul a[aria-current] { text-underline-offset: 6px; } .menu .btn { margin-top: 14px; } } /* Téléphone à l'horizontale : menu sur deux colonnes pour tout voir sans défiler */ @media (max-width: 1099px) and (max-height: 500px) and (orientation: landscape) { .menu.est-ouvert { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: center; } .menu ul { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; } .menu li a, .menu-tel { min-height: 46px; padding: 8px 0; } .menu .btn { margin-top: 8px; } } /* Barre « Appeler / Devis » collée en bas de l'écran (mêmes écrans que le menu repliable) */ .barre-mobile { display: none; } @media (max-width: 1099px) { .barre-mobile { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 250, 242, .97); border-top: 1px solid var(--trait); border-radius: 22px 22px 0 0; box-shadow: 0 -8px 24px -8px rgba(90, 60, 20, .22); transition: transform .2s, visibility .2s; } .barre-mobile .btn { flex: 1 1 0; min-height: 48px; padding: 10px 12px; white-space: nowrap; } .barre-mobile.est-cachee { transform: translateY(110%); visibility: hidden; } } /* Menu ouvert : il contient déjà le téléphone et « Devis », la barre s'efface */ @media (max-width: 1099px) { body:has(.menu.est-ouvert) .barre-mobile { transform: translateY(110%); visibility: hidden; } } @media (prefers-reduced-motion: reduce) { .barre-mobile { transition: none; } } /* ========================================================================== 6. SECTIONS DE LA PAGE D'ACCUEIL ========================================================================== */ /* 6.1 Haut de page */ .hero { position: relative; isolation: isolate; overflow: hidden; padding-top: 56px; padding-bottom: 80px; } /* Grande forme vert très pâle en haut à droite (décor seulement) */ .hero::before { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 640px; height: 640px; right: -180px; top: -220px; background: url("data:image/svg+xml,") center / contain no-repeat; } /* Étiquette « ✓ Organisme certifié Qualiopi » au-dessus du grand titre */ .label-qualiopi { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 16px 6px 8px; border-radius: 999px; background: var(--blanc); box-shadow: 0 0 0 1px var(--trait-bleu); color: var(--bleu-fonce); font-size: 16px; font-weight: 700; line-height: 1.3; } .label-qualiopi::before { width: 22px; height: 22px; } .hero h1 { font-size: clamp(36px, 5vw, 60px); line-height: 1.08; letter-spacing: -0.02em; margin: 0; } /* « l'aide à domicile » : surlignage vert, comme un coup de feutre */ .hero h1 .accent { background: linear-gradient(transparent 64%, rgba(198, 217, 46, .5) 64%, rgba(198, 217, 46, .5) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .06em; } .hero .intro { margin-top: 22px; font-size: clamp(18px, 1.5vw, 20px); } .hero .grille-2 { align-items: start; } /* Sur téléphone, la barre du bas porte déjà « Appeler » et « Devis » : on raccourcit le haut de page */ @media (max-width: 700px) { .bandeau { display: none; } /* téléphone dans la barre du bas, e-mail et adresse dans Contact */ .hero { padding-top: 24px; padding-bottom: 36px; } .hero::before { width: 380px; height: 380px; right: -150px; top: -150px; } .hero .intro { line-height: 1.6; margin-bottom: 0; } .hero .boutons { display: none; } .label-qualiopi { margin-bottom: 14px; } } /* Carte « Vous êtes… » : grande carte blanche très arrondie */ .profils { position: relative; display: grid; gap: 12px; background: var(--blanc); border-radius: 28px; box-shadow: var(--ombre-forte); padding: 26px; } /* Les deux personnages du logo, en petit, à côté de « Vous êtes… » */ .profils::before { content: ""; position: absolute; top: 22px; right: 26px; width: 50px; height: 35px; pointer-events: none; background: url("data:image/svg+xml,") center / contain no-repeat; } .profils-titre { font-weight: 700; font-size: 21px; margin: 0 0 4px; } /* Chaque profil : une icône ronde à gauche, une flèche à droite */ .profil { display: block; position: relative; padding: 14px 48px 14px 76px; border: 1px solid var(--trait); border-radius: 18px; color: var(--texte); background: var(--fond); transition: background-color .15s, border-color .15s; } .profil:hover { border-color: var(--bleu-fonce); background: var(--bleu-clair); text-decoration: none; } .profil strong { display: block; font-size: 18px; line-height: 1.3; } .profil span { display: block; color: var(--bleu-fonce); font-size: 16px; line-height: 1.4; margin-top: 4px; } .profil::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: var(--bleu-clair) center / 26px no-repeat; } .profil:hover::before { background-color: var(--blanc); } .profil::after { content: ""; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: var(--blanc) url("data:image/svg+xml,") center / 16px no-repeat; box-shadow: 0 0 0 1px var(--trait-bleu); } /* Icônes des profils (classes dans front-page.php) */ .profil--intervenant::before { background-image: url("data:image/svg+xml,"); } .profil--structure::before { background-image: url("data:image/svg+xml,"); } .profil--emploi::before { background-image: url("data:image/svg+xml,"); } @media (max-width: 700px) { .profils { padding: 18px; gap: 10px; border-radius: 24px; } .profils::before { top: 16px; right: 18px; width: 42px; height: 30px; } .profils .profil span { display: none; } /* les 3 profils tiennent dans le premier écran */ .profil { padding: 12px 44px 12px 60px; } .profil::before { left: 10px; width: 40px; height: 40px; background-size: 22px; } .profil::after { right: 10px; } .profil strong { font-size: 17px; } } /* Petits téléphones (360-400 px) : haut de page resserré pour voir les 3 profils dès l'arrivée */ @media (max-width: 400px) { .hero { padding-top: 16px; } .label-qualiopi { margin-bottom: 10px; } .hero h1 { font-size: 32px; } .hero .intro { margin-top: 14px; font-size: 16px; line-height: 1.55; } .hero .grille-2 { row-gap: 20px; } .profils { padding: 14px; gap: 8px; } .profils::before { top: 12px; right: 14px; } .profils-titre { font-size: 19px; } .profil { padding: 10px 40px 10px 56px; } .profil::before { left: 8px; width: 36px; height: 36px; background-size: 20px; } .profil strong { font-size: 16px; } } /* 6.2 Chiffres clés : panneau bleu nuit, chiffres en vert du logo */ .chiffres-bande { padding-top: 36px; padding-bottom: 30px; } /* Deux grands anneaux pâles en décor */ .chiffres-bande::before, .chiffres-bande::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; width: 220px; height: 220px; border: 22px solid rgba(43, 172, 219, .25); left: -80px; bottom: -110px; } .chiffres-bande::after { left: auto; bottom: auto; right: -70px; top: -120px; border-color: rgba(198, 217, 46, .22); } .chiffres { display: grid; grid-template-columns: repeat(3, 1fr); } .chiffre { text-align: center; padding: 8px 12px; } .chiffre + .chiffre { border-left: 2px dotted rgba(255, 255, 255, .3); } .chiffre strong { display: block; font-size: clamp(30px, 3.8vw, 48px); line-height: 1.15; letter-spacing: -0.02em; color: var(--vert); white-space: nowrap; } .chiffre span { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; } .note-centre { text-align: center; font-size: 16px; color: var(--bleu-clair); margin: 14px 0 0; } @media (max-width: 700px) { .chiffres-bande { padding-top: 24px; padding-bottom: 22px; } .chiffres-bande::after { display: none; } .chiffres-bande::before { width: 150px; height: 150px; border-width: 16px; left: -70px; bottom: -80px; } } @media (max-width: 560px) { .chiffre { padding: 4px; } .chiffre strong { font-size: clamp(20px, 6vw, 30px); } .chiffre span { font-size: 16px; line-height: 1.3; } } /* 6.3 Cartes (formations, valeurs) */ .cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 32px; } .cartes--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 0; } .carte { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; background: var(--blanc); border: 1px solid var(--trait); border-radius: 24px; box-shadow: var(--ombre); padding: 26px 26px 24px; } .carte h3, .carte h4 { margin: 0; } .carte p { margin: 0; color: var(--texte-doux); } /* Cartes formation : un quart de cercle coloré dans le coin, bleu et vert en alternance */ .formation { background: radial-gradient(circle at 100% 0, var(--bleu-clair) 0 70px, transparent 71px), var(--blanc); } .formation:nth-child(even) { background: radial-gradient(circle at 100% 0, var(--vert-clair) 0 70px, transparent 71px), var(--blanc); } .formation h3 { padding-right: 24px; } .formation p { margin-bottom: 8px; } /* Bouton « Demander cette formation → » sur toute la largeur de la carte */ .formation .btn { margin-top: auto; align-self: stretch; } @media (max-width: 400px), (min-width: 901px) and (max-width: 1179px) { .formation .btn { padding-left: 12px; padding-right: 12px; font-size: 15px; gap: 4px; } } .detail { font-size: 16px; color: var(--texte) !important; margin: 0 !important; } .lien-programme { font-weight: 700; text-decoration: underline; } /* Pastille de durée avec une petite horloge */ .pastille { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px 5px 10px; border-radius: 999px; background: var(--bleu-clair); color: var(--bleu-fonce); font-size: 16px; font-weight: 700; } .pastille::before { content: ""; width: 17px; height: 17px; flex: 0 0 auto; background: url("data:image/svg+xml,") center / contain no-repeat; } /* Cartes « Ce à quoi nous tenons » : une icône ronde en tête de carte (classes dans front-page.php) */ .cartes--3 .carte::before { content: ""; display: block; width: 56px; height: 56px; border-radius: 50%; margin-bottom: 6px; background-color: var(--vert-clair); background-position: center; background-size: 28px; background-repeat: no-repeat; } .carte--geste::before { background-image: url("data:image/svg+xml,"); } .carte--dignite::before { background-image: url("data:image/svg+xml,"); } .carte--sante::before { background-image: url("data:image/svg+xml,"); } @media (max-width: 700px) { .cartes { gap: 14px; margin-top: 24px; } .carte { padding: 16px; gap: 8px; border-radius: 20px; } .intro { font-size: 17px; } /* Valeurs : icône à gauche du titre pour gagner de la hauteur */ .cartes--3 .carte { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px 14px; align-items: center; } .cartes--3 .carte::before { width: 48px; height: 48px; margin: 0; background-size: 24px; } .cartes--3 .carte p { grid-column: 1 / -1; } } /* Valeurs sur tablette : une carte par ligne, icône à gauche (évite une carte seule sur sa ligne) */ @media (min-width: 701px) and (max-width: 888px) { .cartes--3 { grid-template-columns: 1fr; } .cartes--3 .carte { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px 14px; align-items: center; } .cartes--3 .carte::before { width: 48px; height: 48px; margin: 0; background-size: 24px; } .cartes--3 .carte p { grid-column: 1 / -1; } } /* Encadré horizontal (sur mesure, handicap) : grands arrondis, anneau du logo en décor */ .encart { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 28px; padding: 30px 34px; border-radius: 28px; background: var(--vert-clair); } .encart::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 200px; height: 200px; right: -70px; bottom: -110px; background: url("data:image/svg+xml,") center / contain no-repeat; } .encart > div { flex: 1 1 420px; } .encart h3, .encart h2 { margin: 0 0 6px; } .encart p { margin: 0; color: var(--texte-doux); } .encart--neutre { margin-top: 0; background: var(--bleu-clair); } .encart--neutre::after { background-image: url("data:image/svg+xml,"); } /* Encadré vert : anneau blanc, pour que le bouton vert reste le seul vert vif */ .encart:not(.encart--neutre)::after { background-image: url("data:image/svg+xml,"); } @media (max-width: 700px) { .encart { padding: 22px; border-radius: 24px; } .encart::after { display: none; } } /* 6.4 Financement */ .tableau-scroll { margin-top: 24px; } @media (min-width: 701px) { .tableau-scroll { overflow-x: auto; padding-bottom: 28px; margin-bottom: -28px; } } /* place pour l'ombre */ .tableau { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 16px; background: var(--blanc); border: 1px solid var(--trait-bleu); border-radius: 24px; overflow: hidden; box-shadow: var(--ombre); } /* En-tête du tableau en bleu nuit, souligné de vert */ .tableau th { text-align: left; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--blanc); background: var(--bleu-tres-fonce); padding: 16px 20px; border-bottom: 3px solid var(--vert); } .tableau td { padding: 18px 20px; border-bottom: 1px solid var(--trait); vertical-align: top; } .tableau td:first-child { font-weight: 700; width: 28%; } .tableau tr:last-child td { border-bottom: 0; } /* Sur téléphone, chaque ligne du tableau devient une carte lisible sans défilement horizontal */ @media (max-width: 700px) { .tableau, .tableau tbody, .tableau tr, .tableau td { display: block; width: auto !important; } .tableau { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; } .tableau thead { display: none; } /* chaque carte porte ses propres intitulés */ .tableau tr { background: var(--blanc); border: 1px solid var(--trait-bleu); border-radius: 20px; padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--ombre); } .tableau td { border: 0; padding: 3px 0; } .tableau td:first-child { font-size: 17px; margin-bottom: 4px; } .tableau td[data-titre]::before { content: attr(data-titre) " : "; font-weight: 700; color: var(--bleu-fonce); } } /* Questions fréquentes : chaque question est une carte blanche, avec un rond « + » qui devient « − » une fois ouverte */ .faq { margin-top: 32px; max-width: 52em; } .faq details { border: 1px solid var(--trait-bleu); border-radius: 20px; background: var(--blanc); margin-bottom: 12px; } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 18px 14px 22px; border-radius: 20px; cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--bleu-fonce) url("data:image/svg+xml,") center / 16px no-repeat; } .faq details[open] summary::after { background-image: url("data:image/svg+xml,"); } .faq summary:hover { color: var(--bleu-fonce); } .faq details p { margin: 0; padding: 0 22px 18px; color: var(--texte-doux); } /* Bloc Qualiopi : carte blanche, badge pilule avec une coche */ .qualiopi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 32px; padding: 20px 24px; background: var(--blanc); border: 1px solid var(--trait-bleu); border-radius: 24px; } .qualiopi p { flex: 1 1 380px; margin: 0; color: var(--texte-doux); } .badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--bleu-fonce); color: var(--blanc); font-weight: 700; font-size: 16px; letter-spacing: .06em; } .badge::before { content: ""; width: 16px; height: 16px; background: url("data:image/svg+xml,") center / contain no-repeat; } /* 6.5 Photos (affichées seulement quand elles sont choisies dans Personnaliser) */ .photo { border-radius: var(--arrondi-grand); overflow: hidden; background: var(--fond-2); box-shadow: var(--ombre); aspect-ratio: 4 / 3; } .photo img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .photo { aspect-ratio: 16 / 9; max-height: 360px; } } /* Listes : une coche dans un rond au lieu d'un simple point */ .puces { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 44em; } .puces li { position: relative; padding-left: 38px; } .puces li::before { content: ""; position: absolute; left: 0; top: .12em; width: 24px; height: 24px; background: url("data:image/svg+xml,") center / contain no-repeat; } /* Version verte (méthode, contact) : rond vert clair, coche olive (le vert vif reste réservé aux boutons) */ .puces--vert li::before, .rassurance li::before { background-image: url("data:image/svg+xml,"); } /* Témoignage : grande bulle vert clair, guillemet olive dans un rond blanc */ .citation { position: relative; margin-top: 40px; background: var(--vert-clair); border-radius: var(--arrondi-grand); padding: 34px 40px 32px 112px; } .citation::before { content: ""; position: absolute; left: 32px; top: 30px; width: 56px; height: 56px; border-radius: 50%; background: var(--blanc) url("data:image/svg+xml,") center / 26px no-repeat; } .citation blockquote { font-weight: 600; font-size: clamp(20px, 2vw, 24px); line-height: 1.5; max-width: 48ch; margin: 0; } .citation figcaption { margin-top: 12px; font-weight: 600; color: var(--texte-doux); } @media (max-width: 700px) { .citation { padding: 84px 22px 24px; border-radius: 26px; margin-top: 28px; } .citation::before { left: 22px; top: 22px; width: 50px; height: 50px; background-size: 24px; } } /* 6.6 Équipe */ .equipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; margin-top: 28px; } .membre { text-align: center; } .membre .portrait { width: 140px; height: 140px; margin: 0 auto; border-radius: 50%; overflow: hidden; background: var(--bleu-clair); border: 4px solid var(--blanc); box-shadow: 0 0 0 3px var(--vert), var(--ombre); } .membre .portrait img { width: 100%; height: 100%; object-fit: cover; } .membre h3 { font-size: 18px; margin: 16px 0 0; } .membre p { font-size: 16px; color: var(--texte-doux); margin: 4px 0 0; } @media (max-width: 640px) { .equipe { gap: 16px; } .membre { display: grid; grid-template-columns: 72px 1fr; column-gap: 16px; align-items: center; text-align: left; } .membre .portrait { width: 72px; height: 72px; grid-row: span 2; margin: 0; } .membre h3 { margin: 0; align-self: end; } .membre p { margin: 0; align-self: start; } } /* 6.7 Emploi */ .emploi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; } .emploi > div { flex: 1 1 480px; } .emploi .intro { margin-bottom: 0; } .emploi .intro + p { margin-top: 14px; } /* 6.8 Contact */ .contact-infos .petit { margin-top: 4px; } .tel-gros { margin: 8px 0 4px; font-size: 21px; } .rassurance { margin-top: 24px; } .coordonnees { margin-top: 24px; } .coordonnees p { margin: 0 0 12px; } /* ========================================================================== 7. PIED DE PAGE : fond sable aux coins arrondis ========================================================================== */ .pied { margin-top: 28px; border-radius: 40px 40px 0 0; background: var(--fond-2); font-size: 16px; } .pied-haut { display: flex; gap: 28px 56px; flex-wrap: wrap; justify-content: space-between; padding-top: 44px; padding-bottom: 28px; } .pied-haut > * { max-width: 340px; } /* Les deux personnages du logo, en filigrane sous le texte de présentation */ .pied-haut > div:first-child::after { content: ""; display: block; width: 96px; height: 68px; margin-top: 22px; opacity: .45; background: url("data:image/svg+xml,") left center / contain no-repeat; } .pied h2 { font-size: 17px; margin: 0 0 10px; } .pied .logo img { height: 48px; } .pied p { color: var(--texte-doux); margin-top: 14px; } .pied-liens { display: flex; flex-direction: column; gap: 0; } .pied-liens a { display: flex; align-items: center; min-height: 44px; color: var(--texte); } .pied p a { display: inline-block; padding: 10px 0; } .pied-haut > div:last-child p { line-height: 44px; } /* « Nous joindre » : une ligne de 44 px par information */ .pied-haut > div:last-child p a { padding: 0; } .pied-bas { display: flex; gap: 12px 24px; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-top: 18px; padding-bottom: 28px; font-size: 16px; /* filet du haut, aligné sur le texte (et non sur les marges) */ background: linear-gradient(var(--trait), var(--trait)) var(--marge) 0 / calc(100% - 2 * var(--marge)) 1px no-repeat; } .pied-bas p { margin: 0; } .pied-bas nav { display: flex; gap: 4px 22px; flex-wrap: wrap; } .pied-bas nav a { display: inline-flex; align-items: center; min-height: 44px; } /* Cibles tactiles d'au moins 44 px sur téléphone et tablette */ @media (max-width: 1099px) { .coordonnees a { display: inline-flex; align-items: center; min-height: 44px; } /* Le pied de page passe sous la barre « Appeler / Devis » : on lui laisse la place */ .pied { padding-bottom: calc(72px + env(safe-area-inset-bottom)); } } @media (max-width: 700px) { .pied { border-radius: 28px 28px 0 0; } .pied-haut > div:first-child::after { display: none; } } /* ========================================================================== 8. PAGES SIMPLES (mentions légales, confidentialité, cookies…) ========================================================================== */ .page-simple { max-width: 820px; padding-top: 48px; padding-bottom: 64px; } .page-simple h1 { font-size: clamp(30px, 4vw, 42px); } .page-simple h2 { font-size: 22px; margin-top: 2em; } .page-simple h3 { font-size: 18px; margin-top: 1.5em; } .page-simple ul { padding-left: 1.2em; } .page-simple table { border-collapse: collapse; width: 100%; background: var(--blanc); } .page-simple td, .page-simple th { border: 1px solid var(--trait); padding: 8px 10px; text-align: left; vertical-align: top; overflow-wrap: anywhere; } .page-simple .boutons { justify-content: center; } .a-completer { background: #fff3c4; padding: 0 4px; border-radius: 4px; } /* ========================================================================== 9. AJOUTS (octobre 2026) : documents à télécharger, retours stagiaires, emploi ========================================================================== */ /* Bandeau du haut : lien vers le rapport de satisfaction, à côté de la mention Qualiopi */ .bandeau-droite { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; } .bandeau-rapport { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--bleu-fonce); text-decoration: underline; text-underline-offset: 3px; } .bandeau-rapport:focus-visible { outline-offset: -3px; } /* Même lien sous les chiffres clés (visible aussi sur téléphone) */ .note-centre .lien-rapport { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; } /* Bouton « catalogue complet » au-dessus des formations */ .telecharger-catalogue { margin: -6px 0 26px; } .btn-petit { min-height: 44px; padding: 8px 18px; font-size: 16px; } /* Lien « Télécharger le programme » dans chaque carte formation */ .lien-programme { display: inline-flex; align-items: center; min-height: 44px; color: var(--bleu-fonce); } /* Retours de la promotion 2025 */ #methode .titre-bloc { margin-bottom: 0; } .mots-stagiaires { display: flex; flex-wrap: wrap; gap: 10px 14px; list-style: none; padding: 0; margin: 18px 0 0; } .mots-stagiaires li { padding: 6px 14px; border: 1px solid var(--trait); border-radius: 12px; background: var(--blanc); font-weight: 600; color: var(--bleu-fonce); } /* Handicap : lien vers la démarche inclusion */ .encart .lien-doc { margin-top: 10px; } .lien-doc a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--bleu-fonce); } /* Emploi : candidatures de formateurs */ .emploi .formateur { margin-top: 14px; } .emploi .formateur a { font-weight: 700; overflow-wrap: anywhere; } /* ========================================================================== 10. PETITES ANIMATIONS (désactivables dans Contenu du site > Haut de page) Jamais pour les visiteurs qui ont demandé à réduire les animations. ========================================================================== */ @media (prefers-reduced-motion: no-preference) { /* Haut de page : le texte puis les cartes « Vous êtes… » arrivent en douceur */ .avec-animations .hero .grille-2 > :first-child { animation: occiform-arrivee .7s ease-out both; } .avec-animations .hero .profils-titre { animation: occiform-arrivee .6s ease-out .2s both; } .avec-animations .hero .profil { animation: occiform-arrivee .6s ease-out both; } .avec-animations .hero .profil:nth-of-type(1) { animation-delay: .3s; } .avec-animations .hero .profil:nth-of-type(2) { animation-delay: .4s; } .avec-animations .hero .profil:nth-of-type(3) { animation-delay: .5s; } @keyframes occiform-arrivee { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* Blocs qui apparaissent au défilement (classe posée par assets/js/main.js) */ .anim-pret .anim { opacity: 0; transform: translateY(22px); transition: opacity .6s ease-out, transform .6s ease-out; } .anim-pret .anim.est-visible { opacity: 1; transform: none; } /* Survol : les cartes se soulèvent, la flèche des cartes « Vous êtes… » avance */ .avec-animations .carte { transition: transform .25s ease, box-shadow .25s ease; } .avec-animations .carte.formation:hover, .avec-animations .cartes--3 .carte:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(13, 43, 58, .35); } .avec-animations .profil::after { transition: transform .2s ease; } .avec-animations .profil:hover::after { transform: translate(4px, -50%); } } /* Les chiffres gardent leur taille et leur largeur pendant qu'ils défilent */ .chiffre strong { font-variant-numeric: tabular-nums; } .chiffre strong > span { display: inline; margin: 0; font-size: inherit; font-weight: inherit; } @media print { .anim { opacity: 1 !important; transform: none !important; } } /* ========================================================================== 11. PAGES FORMATION (/formations/…) et liens vers elles ========================================================================== */ .formation h3 a { color: inherit; text-decoration: none; } .formation h3 a:hover { text-decoration: underline; text-underline-offset: 3px; } .formation .lien-detail { margin-bottom: -10px; } .fil-ariane { font-size: 15px; color: var(--texte-doux); margin: 0 0 22px; } .fil-ariane a { color: var(--bleu-fonce); } .page-formation .pastille { margin-bottom: 4px; } .page-formation h1 { margin-top: 10px; } .infos-formation { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 26px 0; padding: 0; } .infos-formation div { background: var(--blanc); border: 1px solid var(--trait); border-radius: 16px; padding: 12px 16px; } .infos-formation dt { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bleu-fonce); } .infos-formation dd { margin: 4px 0 0; } .contenu-formation { margin: 8px 0 24px; } .page-formation .boutons { justify-content: flex-start; margin: 28px 0 36px; } .page-formation .encart { margin-bottom: 8px; } .autres-formations { list-style: none; padding: 0 !important; display: grid; gap: 4px; } .autres-formations li { padding: 8px 0; border-bottom: 1px solid var(--trait); } .autres-formations a { font-weight: 700; color: var(--bleu-fonce); } /* ========================================================================== 12. PROGRAMME DES PAGES FORMATION Chaque « Titre 2 » du texte de la formation devient une partie numérotée. Trois présentations au choix (Contenu du site > Formations) : parcours, sommaire, grille. ========================================================================== */ .programme { margin: 44px 0 40px; } .page-simple .programme-titre { font-size: clamp(24px, 3vw, 30px); margin: 0 0 24px; } .programme-etapes { list-style: none; margin: 0; padding: 0 !important; } .page-simple .etape-titre { margin: 0; font-size: 20px; line-height: 1.25; } .etape-num { display: block; font-size: 14px; font-weight: 800; letter-spacing: .08em; color: var(--bleu-fonce); } .page-simple .etape-contenu ul { list-style: none; margin: 0; padding: 0; } .etape-contenu li { position: relative; padding-left: 20px; margin: 0 0 8px; } .etape-contenu li::before { content: ""; position: absolute; left: 0; top: .72em; width: 10px; height: 2px; background: var(--bleu); } .etape-contenu p { margin: 0 0 8px; } .etape-contenu > :last-child, .etape-contenu li:last-child { margin-bottom: 0; } /* Parcours : un trait vertical, un point par partie */ .programme--parcours .etape { display: grid; grid-template-columns: 210px 1fr; column-gap: 34px; } .programme--parcours .etape-titre { text-align: right; padding: 0 0 30px; } .programme--parcours .etape-contenu { position: relative; padding: 2px 0 30px 30px; border-left: 2px solid var(--bleu-clair); } .programme--parcours .etape-contenu::before { content: ""; position: absolute; left: -9px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--fond); border: 3px solid var(--bleu-fonce); } .programme--parcours .etape:last-child .etape-contenu { border-left-color: transparent; } @media (max-width: 640px) { .programme--parcours .etape { grid-template-columns: 1fr; padding-left: 9px; } .programme--parcours .etape-titre { text-align: left; padding: 0 0 10px 30px; border-left: 2px solid var(--bleu-clair); } .programme--parcours .etape-contenu::before { top: -26px; } .programme--parcours .etape:first-child .etape-titre { border-left-color: transparent; } } /* Sommaire : une ligne par partie, gros numéro creux à gauche */ .programme--sommaire .etape { display: grid; grid-template-columns: 74px 220px 1fr; column-gap: 24px; align-items: start; padding: 24px 0; border-top: 1px solid var(--trait); } .programme--sommaire .etape:last-child { border-bottom: 1px solid var(--trait); } .programme--sommaire .etape-titre { grid-column: 1 / 3; display: grid; grid-template-columns: 74px 220px; column-gap: 24px; align-items: start; } .programme--sommaire .etape-num { font-size: 46px; line-height: .9; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.5px var(--bleu-fonce); } .programme--sommaire .etape-contenu { grid-column: 3; } @media (max-width: 640px) { .programme--sommaire .etape { grid-template-columns: 56px 1fr; column-gap: 16px; row-gap: 10px; } .programme--sommaire .etape-titre { grid-column: 1 / -1; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center; } .programme--sommaire .etape-num { font-size: 36px; } .programme--sommaire .etape-contenu { grid-column: 2; } } /* Grille : les parties côte à côte, un filet bleu au-dessus */ .programme--grille .programme-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 28px 28px; } .programme--grille .etape { padding-top: 16px; border-top: 3px solid var(--bleu-fonce); } .programme--grille .etape-num { font-size: 40px; line-height: 1; letter-spacing: -0.02em; color: var(--bleu-clair); -webkit-text-stroke: 1px var(--bleu-fonce); margin-bottom: 8px; } .programme--grille .etape-titre { margin-bottom: 12px !important; } /* ========================================================================== 13. STYLE CLASSIQUE (choix par défaut : Contenu du site > Police et style) Fond blanc, angles peu arrondis, ombres légères, sans formes décoratives. Le style « Arrondi » est celui des parties 1 à 12, sans ces retouches. ========================================================================== */ .style-classique { --fond: #ffffff; --fond-2: #f3f6f8; /* gris bleuté très clair : bandeau du haut, pied de page */ --trait: #dde3e8; /* filets gris clair */ --arrondi-grand: 12px; --ombre: 0 1px 2px rgba(13, 43, 58, .06), 0 6px 16px -10px rgba(13, 43, 58, .18); --ombre-forte: 0 1px 3px rgba(13, 43, 58, .07), 0 12px 28px -16px rgba(13, 43, 58, .25); } /* Bandes de couleur sur toute la largeur, sans arrondi ni anneau */ .style-classique .bande--bleue, .style-classique .bande--verte, .style-classique .bande--foncee { margin-left: 0; margin-right: 0; border-radius: 0; } .style-classique [class*="bande--"] + [class*="bande--"] { margin-top: 0; } .style-classique .hero::before, .style-classique .bande--verte::before, .style-classique .bande--bleue::before, .style-classique .chiffres-bande::before, .style-classique .chiffres-bande::after, .style-classique .encart::after, .style-classique .sur-titre::before { display: none; } .style-classique .chiffre + .chiffre { border-left: 1px solid rgba(255, 255, 255, .25); } /* Grand titre : les mots en bleu, sans surlignage */ .style-classique .hero h1 .accent { background: none; padding: 0; } .style-classique .entete { background: rgba(255, 255, 255, .97); } /* Boutons rectangulaires, à plat */ .style-classique .btn, .style-classique .menu-bouton { border-radius: 6px; } .style-classique .btn-primaire, .style-classique .btn-primaire:active { border-color: #a9bb22; box-shadow: none; transform: none; } .style-classique .btn:hover { transform: none; } /* Cartes et encadrés : petits arrondis */ .style-classique .carte, .style-classique .encart, .style-classique .qualiopi, .style-classique .tableau, .style-classique .tableau tr, .style-classique .faq details, .style-classique .faq summary { border-radius: 8px; } .style-classique .formation, .style-classique .formation:nth-child(even) { background: var(--blanc); border-top: 3px solid var(--bleu); } .style-classique .profils, .style-classique .carte-formulaire { border-radius: 10px; border: 1px solid var(--trait); } .style-classique .profil, .style-classique .infos-formation div, .style-classique .champ input, .style-classique .champ select, .style-classique .champ textarea, .style-classique .message-form { border-radius: 6px; } .style-classique .pastille, .style-classique .label-qualiopi, .style-classique .badge, .style-classique .mots-stagiaires li { border-radius: 4px; } .style-classique .tableau th { text-transform: none; letter-spacing: 0; font-size: 16px; } /* Icônes sans rond de couleur derrière */ .style-classique .profil::before, .style-classique .profil:hover::before, .style-classique .cartes--3 .carte::before { background-color: transparent; } .style-classique .profil::after { background-color: transparent; box-shadow: none; } .style-classique .cartes--3 .carte::before { border-radius: 0; background-size: 32px; background-position: left center; } .style-classique .faq summary::after { background-color: transparent; background-size: 22px; background-image: url("data:image/svg+xml,"); } .style-classique .faq details[open] summary::after { background-image: url("data:image/svg+xml,"); } /* Témoignage : simple filet vert à gauche */ .style-classique .citation { border-radius: 0; border-left: 4px solid var(--vert); padding: 26px 32px; } .style-classique .citation::before { display: none; } /* Pied de page droit */ .style-classique .pied { border-radius: 0; } @media (max-width: 1099px) { .style-classique .menu { border-radius: 0; box-shadow: 0 16px 28px -16px rgba(13, 43, 58, .3); } .style-classique .barre-mobile { border-radius: 0; background: rgba(255, 255, 255, .97); box-shadow: 0 -6px 18px -8px rgba(13, 43, 58, .2); } } @media (max-width: 700px) { .style-classique .citation { padding: 20px 22px; } } /* ========================================================================== 14. FORMULAIRE : cases alignées, croix pour vider une case ; encadré satisfaction ========================================================================== */ /* Deux cases côte à côte restent alignées, même si un intitulé passe sur deux lignes */ .formulaire .ligne { align-items: end; } /* Toutes les cases gardent 48 px de haut, même avec le contour rouge d'une case à corriger */ .champ input, .champ select { line-height: 1.3; } /* Croix pour vider une case (ajoutée par assets/js/main.js, seulement dans une case remplie). 44 px de côté : facile à toucher au doigt. */ .boite-champ { position: relative; display: block; } .boite-champ input, .boite-champ textarea { padding-right: 46px; } .vider { position: absolute; top: 2px; right: 2px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; cursor: pointer; background: transparent url("data:image/svg+xml,") center / 20px no-repeat; } .vider:hover { background-color: var(--bleu-clair); } .vider[hidden] { display: none; } .style-classique .vider { border-radius: 6px; } /* Pas de petites flèches dans la case « Nombre de personnes » : la croix prend leur place */ .champ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .champ input[type="number"]::-webkit-inner-spin-button, .champ input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Encadré satisfaction, à gauche du formulaire : le chiffre en grand, une jauge, le lien vers le rapport */ .satisfaction { margin-top: 24px; max-width: 360px; padding: 18px 20px 8px; background: var(--blanc); border: 1px solid var(--trait-bleu); border-radius: 18px; } .style-classique .satisfaction { border-radius: 8px; } .satisfaction-titre { margin: 0 0 4px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bleu-fonce); } .satisfaction-chiffre { margin: 0; font-weight: 600; line-height: 1.35; } .satisfaction-chiffre strong { display: block; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; color: var(--bleu-fonce); white-space: nowrap; } .jauge { height: 8px; margin: 12px 0 2px; border-radius: 99px; background: var(--bleu-clair); overflow: hidden; } .jauge span { display: block; height: 100%; border-radius: inherit; background: var(--vert); } .satisfaction .lien-rapport { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 900px) { .satisfaction { max-width: none; } } /* ========================================================================== 15. PHOTOS DANS LES TEXTES : l'alignement choisi dans l'éditeur (gauche, centre, droite) ========================================================================== */ .aligncenter { display: block; margin: 1em auto; } .alignleft { float: left; margin: .3em 1.5em 1em 0; } .alignright { float: right; margin: .3em 0 1em 1.5em; } .wp-caption { max-width: 100%; } .wp-caption img { margin: 0; } .wp-caption-text { margin: 6px 0 0; font-size: 15px; color: var(--texte-doux); text-align: center; } .contenu-formation, .etape-contenu, .page-simple { display: flow-root; } /* le texte ne passe pas sous une photo à gauche ou à droite */ /* Sur téléphone, une photo à gauche ou à droite passe au centre, sur toute la largeur utile */ @media (max-width: 560px) { .alignleft, .alignright { float: none; display: block; margin: 1em auto; } }